如何根据其他日期约束jQuery ui日期选择器的最小和最大日期
How to constrain min and max dates for jQuery-ui datepicker based on another date
我想知道如何在入住日期之间设置退房日期。就像我们选择六月(当前月份是二月)和第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日。但我遵循了你在前几行问题中提到的例子。
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期