Can't make jquery datepicker work on booking form (1 post)

  1. MissNico
    Posted 2 years ago #

    I can't make the jquery datepicker work on my website. I am a total newbie in creating websites but with wordpress I managed to create my small hotel's website using a child theme of hybrid in wordpress:


    The company that created the online booking for me gave me the following example so that i can put a booking form (that links to the booking microsite) on my website. The link to the example is

    What I do is putting the following code in a text widget on my website (obviously edited to fit my preferences):

    <form action="https://demo.reserve-online.net/" method="post" target="_blank">
    		<label for="checkin-select">Check-in</label>
    		<input type="hidden" name="checkin" value="2013-02-09">
    		<input id="checkin-select" placeholder="dd/mm/yyyy" class="hasDatepicker">
    		<!-- @see http://jqueryui.com/demos/datepicker/#date-range for enabling date ranges -->
    		<label for="checkout-select">Check-out</label>
    		<input type="hidden" name="checkout" value="2013-02-10">
    		<input id="checkout-select" placeholder="dd/mm/yyyy" class="hasDatepicker">
    		<!-- Instead of check-out, you could replace with "nights" -->
    		<label for="nights">Staying For</label>
    		<select id="nights" name="nights">
    			<option value="1" selected>1 night</option>
    			<option value="2">2 nights</option>
    			<option value="3">3 nights</option>
    			<option value="4">4 nights</option>
    			<option value="5">5 nights</option>
    			<option value="6">6 nights</option>
    			<option value="7">7 nights</option>
    			<option value="8">8 nights</option>
    			<option value="9">9 nights</option>
    			<option value="10">10 nights</option>
    			<option value="11">11 nights</option>
    			<option value="12">12 nights</option>
    			<option value="13">13 nights</option>
    			<option value="14">14 nights</option>
    		<label for="adults">Adults</label>
    		<select id="adults" name="adults">
    			<option value="1">1 adult</option>
    			<option value="2" selected="">2 adults</option>
    			<option value="3">3 adults</option>
    			<option value="4">4 adults</option>
    			<option value="5">5 adults</option>
    			<option value="6">6 adults</option>
    			<option value="7">7 adults</option>
    		<label for="children">Children</label>
    		<select id="children" name="children">
    			<option value="0" selected="">no children</option>
    			<option value="1">1 child</option>
    			<option value="2">2 children</option>
    			<option value="3">3 children</option>
    			<option value="4">4 children</option>
    			<option value="5">5 children</option>
    			<option value="6">6 children</option>
    		<label for="rooms">Rooms</label>
    		<select id="rooms" name="rooms">
    			<option value="1" selected="">1 room</option>
    			<option value="2">2 rooms</option>
    			<option value="3">3 rooms</option>
    			<option value="4">4 rooms</option>
    			<option value="5">5 rooms</option>
    		<button class="btn" type="submit">Check Availability</button>

    and then put the following in the header.php file of my child theme:

    <link rel="stylesheet" media="screen" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
    		var getField = function(id) {
    			var el = $('#'+id+'-select');
    			return el.length ? el : null;
    		var pickerSetup = function(id, date) {
    			var el = getField(id);
    			if ( el ) {
    				var checkin = id === 'checkin';
    					altField: el.get(0).form[id],
    					altFormat: 'yy-mm-dd',
    					dateFormat: 'dd/mm/yy',
    					onSelect: function() {
    						if ( checkin && getField('checkout') !== null ) {
    							var constraint = new Date(el.datepicker('getDate'));
    							getField('checkout').datepicker("option", 'minDate', constraint);
    					numberOfMonths: 2,
    					mandatory: true,
    					firstDay: 1,
    					minDate: checkin ? 0 : 1,
    					maxDate: '+2y'
    					//changeMonth: true,
    					//changeYear: true,
    					//showOtherMonths: true,
    					//selectOtherMonths: true
    				el.datepicker("setDate", date);
    		pickerSetup("checkin", "+0");
    		pickerSetup("checkout", "+1");

    I've read other topics on this forum regarding jquery and have tried a couple of things but nothing seems to work. I think I need to add a /wp_enqueue_script line in functions.php file but not sure how to do that without messing up the links in the form to the bookings microsite. Please help.

Topic Closed

This topic has been closed to new replies.

About this Topic