Search jQuery

jQuery Forum

Datepicker

in Using jQuery UI • 11 years ago

Hello guys, im a newbie in jquery so i hope someone can help me on this:
im making an hotel website, and my client whants a minimum 3 nights in booking system, how can i do this in datepicker, so when a client selecte i.e. in check in date 10/03/2012, automaticly the check out datepicker will add a minimum 3 nights 13/03/2012 and the client can pick this date or a superior date, not less than 13/03.

hope you guys see what i mean and help me on a solution

best regards

Replies(4)

kbwood.au

Re: Datepicker

11 years ago

Something like this:

$(function() {
$.datepicker.setDefaults({showOn: 'both', ...}); // Datepicker defaults
$('#inDate').datepicker({minDate: 0, onSelect: function(dateStr) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 3); // Add three days
}
$('#outDate').datepicker('option', 'minDate', date || +3); // Set as minimum on out date
}});
$('#outDate').datepicker({minDate: +3, onSelect: function(dateStr) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 3); // Subtract three days
}
$('#inDate').datepicker('option', 'maxDate', date); // Set as maximum on in date
}});
});

codzign

Re: Datepicker

11 years ago

thanks very mutch for your help, but since im a newbie can you tell me where do i have to put that code in jquery.ui.datepicker.js document?

kbwood.au

Re: Datepicker

11 years ago

You don't change the Datepicker code (nor any of the other jQuery or jQuery UI modules). You add the code above in a script element in your own page, after loading in jQuery and jQuery UI (at least the Datepicker part).

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/cupertino/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
code from above
</script>

codzign