日期选择时两个日期之间的动态控制--My97datepicker日期选择控件
实现效果:如果先选离店日期,再选入住日期的话,入住日期大于离店日期则离店日期+1天否则离店日期不变,先选入店再选离店离店,离店只能选之后的日期,且两个日期之间最多间隔88天
<div class="searchbook-nape">入住日期:</div> <div class="searchbook-nav"> <input type="text" class="searchbook-ipt validate[required]" id="CheckInDate" name="CheckInDate"/> </div> <div class="searchbook-nape">离店日期:</div> <div class="searchbook-nav"> <input type="text" class="searchbook-ipt validate[required]" id="CheckOutDate" name="CheckOutDate"/> </div>
$("[name=CheckInDate]") .focus( function () { pickCheckInDate(); }); $("[name=CheckInDate]") .click( function () { if ($("[name=CheckInDate]").is(":focus")) { pickCheckInDate(); } }); function pickCheckInDate() { var minDate = new Date(); var maxDate = new Date(); maxDate.setDate(maxDate.getDate() + 88); WdatePicker({ skin: 'default', doubleCalendar: true, dateFmt: 'yyyy-MM-dd', minDate: minDate.format('yyyy-MM-dd'), maxDate: maxDate.format('yyyy-MM-dd'), onpicked: function () { var checkOutDate = $('[name=CheckOutDate]').val(); if (checkOutDate) { var min = new Date(checkOutDate); min.setDate(min.getDate() - 28); var checkInDate = $('[name=CheckInDate]').val(); var date = new Date(checkInDate); var max = new Date(checkOutDate); if (date < min || date >= max) { date.setDate(date.getDate() + 1); $('[name=CheckOutDate]').val(date.format('yyyy-MM-dd')); } } } }); } $("[name=CheckOutDate]") .focus( function () { pickCheckOutDate(); }); $("[name=CheckOutDate]") .click( function () { if ($("[name=CheckOutDate]").is(":focus")) { pickCheckOutDate(); } }); function pickCheckOutDate() { var minDate; var maxDate = new Date(); maxDate.setDate(maxDate.getDate() + 89); if ($("[name=CheckInDate]").val()) { var checkInDate = $('[name=CheckInDate]').val(); minDate = new Date(checkInDate); var maxDate28 = new Date(checkInDate); maxDate28.setDate(maxDate28.getDate() + 28); if (maxDate28 < maxDate) { maxDate = maxDate28; } } else { minDate = new Date(); } minDate.setDate(minDate.getDate() + 1); WdatePicker({ skin: "default", doubleCalendar: true, dateFmt: "yyyy-MM-dd", minDate: minDate.format("yyyy-MM-dd"), maxDate: maxDate.format("yyyy-MM-dd") }); }