WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. MissNico
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic