jQuery UI Datepicker Add Days (check-in,check-out,no. of nights)

by admin on March 6th, 2012

<div class="cus-select" style="width:90px;">
<input type="text" name="check_in[<?=$_GET['i']?>]" class="custom-sel-box check_in checkin_out"
style="width:90px;" onchange="getDetail('<?=$_GET['i']?>')" >
</div>
<div class="cus-select" style="width:90px; margin-left: 14px;">
<input type="text" name="check_out[<?=$_GET['i']?>]" class="custom-sel-box check_out checkin_out"
style="width:90px;" onchange="getDetail('<?=$_GET['i']?>')" >
</div>


<div class="cus-select" style="width:90px; margin-left: 14px;">
<select name="nights[<?=$_GET['i']?>]" class="custom-sel-box nights" style="width:90px;"
onchange="getDetail('<?=$_GET['i']?>')" >
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>        
</select>
</div>

$( ".checkin_out" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
minDate: new Date(),
onSelect:function(v,d){
total_night = parseInt($( ".cust_multi_form_inner<?=$_GET['i']?> .nights" ).val());
check_in = $( ".cust_multi_form_inner<?=$_GET['i']?> .check_in" ).val();
check_out = $( ".cust_multi_form_inner<?=$_GET['i']?> .check_out" ).val();
cal_cls = $(this).attr('class').split(' ')[1];

if(cal_cls=='check_in'){
start = $.datepicker.parseDate('dd-mm-yy', v);
start.setDate(start.getDate()+total_night);
$('.cust_multi_form_inner<?=$_GET['i']?> .check_out').val($.datepicker.formatDate('dd-mm-yy', start));
getDetail('<?=$_GET['i']?>');
}
if(cal_cls=='check_out'){
end = $.datepicker.parseDate('dd-mm-yy', v);
start = $.datepicker.parseDate('dd-mm-yy', check_in);
no_of_nights = (end-start)/(1000*60*60*24);
$('.cust_multi_form_inner<?=$_GET['i']?> .nights').val(no_of_nights);
getDetail('<?=$_GET['i']?>');
}
}
});

$('.nights').change(function(){
total_night = parseInt($(this).val());
start = $.datepicker.parseDate('dd-mm-yy', $('.cust_multi_form_inner<?=$_GET['i']?> .check_in').val());
start.setDate(start.getDate()+total_night);
$( ".cust_multi_form_inner<?=$_GET['i']?> .check_out" ).val($.datepicker.formatDate('dd-mm-yy', start));
getDetail('<?=$_GET['i']?>');
});

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>