![](/img/trans.png)
[英]How to properly configure jquery-ui datepicker max/min range and initialize default from Rails column?
[英]How to constrain min and max dates for jQuery-ui datepicker based on another date
我想知道如何在入住日期之間設置退房日期。 就像我們選擇6月(當前月為2月)和15日一樣。 因此,它有權選擇30天(最多30天)之間的日期。 因此結束日期為:7月15日。 這里我們有一個代碼:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
body{ font: 60.0% "Trebuchet MS", sans-serif; margin: 50px; }
</style>
<script type="text/javascript">
$(function() {
$('#from').datepicker({
numberOfMonths: 2,
firstDay: 1,
dateFormat: 'DD dd-mm-yy',
minDate: '0',
maxDate: '+2Y',
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate');
$('#to').datepicker('option', 'minDate', min || '0');
datepicked();
}
});
$('#to').datepicker({
numberOfMonths: 2,
firstDay: 1,
dateFormat: 'DD dd-mm-yy',
minDate: '0',
maxDate: '+2Y',
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate');
$('#from').datepicker('option', 'maxDate', max || '+2Y');
datepicked();
}
});
});
var datepicked = function() {
var from = $('#from');
var to = $('#to');
var nights = $('#nights');
var fromDate = from.datepicker('getDate')
var toDate = to.datepicker('getDate')
if (toDate && fromDate) {
var difference = 0;
var oneDay = 1000 * 60 * 60 * 24;
var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);
nights.val(difference);
}
}
</script>
<input type="text" id="from" name="from" size="28" style="width:194px; /*Tag Style*/" value="" >
<input type="text" id="to" name="to" size="28" style="width:194px; /*Tag Style*/" value="" >
<input type="text" id="nights" name="nights" size="4" style="width:50px; /*Tag Style*/" value="" readonly="readonly">
我們的主要動機是編寫此代碼,以用於入住,退房和夜間住宿。 入住日期可以是2012-2013年的任何月份,而退房日期僅是30天后的入住日期,而總夜晚數只能是30晚。
看看這個演示 。 我在onSelect事件中添加了以下幾行:
onSelect: function(dateStr) {
var d1 = $(this).datepicker("getDate");
d1.setDate(d1.getDate() + 0); // change to + 1 if necessary
var d2 = $(this).datepicker("getDate");
d2.setDate(d2.getDate() + 30); // change to + 29 if necessary
$("#to").datepicker("setDate", null);
$("#to").datepicker("option", "minDate", d1);
$("#to").datepicker("option", "maxDate", d2);
datepicked();
}
根據我對住宿業務的理解,日期應包括在內-即2012年6月15日+ 30晚應為2012年6月14日。 但是我遵循了您在前幾行中提到的示例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.