JQuery-ui date picker

I am working on a hotel page where I need to use the jQuery-ui datepicker. People should be able to make a preselection on the website and when the click the submit button they are redirected to the actual bookings system from the hotel. The problem I have is the following when I use the datepicker the basic way:


<script type="text/javascript">
  $(function(){
    $("#checkin-select").datepicker();
});
</script>

The date is not passed to the hotel booking system. On that site they have an example where the use the following function:


<script>
	//$.noConflict();
	jQuery(document).ready(function($){
		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>

combined with the following form:


	<form action="https://demo.reserve-online.net/" method="post">

		<input type="hidden" name="checkin">
		<label for="checkin-select">Check-in</label>
		<input type="text" id="checkin-select" placeholder="dd/mm/yyyy">

		<!-- @see http://jqueryui.com/demos/datepicker/#date-range for enabling date ranges -->
		<input type="hidden" name="checkout">
		<label for="checkout-select">Check-out</label>
		<input type="text" id="checkout-select" placeholder="dd/mm/yyyy">

		<!-- 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 type="submit">Check Availability</button>
	</form>
	<!-- END COPY -->

	</div>
</div>
<script>

I just need the check-in date and not the check-out date, so I am sure that i don’t need most of the function as showed above, but I have no clue what I can take out. What should I adjust in the basic function:


<script type="text/javascript">
  $(function(){
    $("#checkin-select").datepicker();
});
</script>

so the hotel bookings system is able to read the date?

This link shows a overview with available parameters

Thank you in advance!

Hi donboe,

Just to check I understood correctly: you have a form and you need to pass the value ( i.e. the date) selected by a date picker within that form to the serverside script your form submits to. Is that correct?

I finaly got it working as you can see here but now i am facing the next problem. The form is sliding down when I roll over the word BOOK NOW. I need a way to make it slide up when the mouse is moving out from the div booking_form. It is basically working but when I move the mouse over the date field or one of the select fields the div it is sliding up as well as you will see in the example. What should I do to avoid that?

Thank you in advance!

Hi Pullo. Thanks for the reply. Please see post above!

Hey there,

This should fix it for you:

$(".booking_button").mouseover(function(){
  $( ".booking_form" ).slideDown( "slow" );
});

$( ".booking_form" ).mouseenter(function(){
  $( ".booking_form" ).slideUp( "slow" );
});

Hi Pullo. Thank you for the reply. I think I have explained myself the wrong way. With the change you gave me the panel is sliding up as soon as the cursor hits the div bookings_form. as you can see in the example!

Sorry donboe, the error was mine.
I edited my post after making it, but changed the wrong bit (Doh!).
Anyway, this’ll sort your problem:

$(".booking_button a").mouseenter(function(){
  $( ".booking_form" ).slideDown( "slow" );
});

$( ".booking_form" ).mouseleave(function(){
  $( ".booking_form" ).slideUp( "slow" );
});

Hi Pullo. No worries. This is indeed working when I stay with my cursor on the booking_form div (incl. textfield and selects), but when click with the cursor in the date field and then click on the calendar, it is sliding up :frowning: Is there something I can do about that. If not. I have a escape using a transparant div underneath the bookings_form which is higher and wider. Then use:


$(".booking_button a").mouseover(function(){
	$( ".booking_form" ).slideDown( "slow" );
	$( ".mouseover" ).slideDown( "slow" );
});

$( ".mouseover" ).mouseover(function(){
  $( ".booking_form" ).slideUp( "slow" );
	$( ".mouseover" ).slideUp( "slow" );
});

Oh ok, that’s interesting.
The reason for is that the datepicker widget is outside of the form tag.
If you can fix this with a transparent div, that would seem like a reasonable solution.

Let me know how you get on.