WordPress.org

Support

Support » How-To and Troubleshooting » Can't make jquery datepicker work on booking form

Can't make jquery datepicker work on booking form

  • Hi
    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:

    http://yakinthos-residence.gr

    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
    this

    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>
    		</select>
    		-->
    		<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>
    		</select>
    
    		<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>
    		</select>
    
    		<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>
    		</select>
    
    		<br><br>
    
    		<button class="btn" type="submit">Check Availability</button>
    	</form>

    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>
    
    <script>
    	jQuery(document).ready(function($){
    	jQuery('.hasDatepicker').datepicker({
    		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';
    				el.datepicker({
    					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'));
    							constraint.setDate(constraint.getDate()+1);
    							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");
    	});
    	</script>

    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.

  • The topic ‘Can't make jquery datepicker work on booking form’ is closed to new replies.
Skip to toolbar