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!
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: