Bootstrap 日期选择器:确保 EndDate > StartDate 以及最大开始日期
Bootstrap Datepicker: Ensuring EndDate > StartDate as well as having a max start date
抱歉,如果我的标题不好。如果重要的话,我还应该首先提到这是一个 MVC 应用程序。
这就是我想要做的。我希望我的日期选择器具有以下要求:
- 开始日期的范围必须是今天 - 45 天前
- 结束日期不能超过今天
- 结束日期必须在开始日期之后
以下是我到目前为止所做的尝试,前 2 颗子弹已经起作用:
HTML
<div class="col-md-6 row">
<div class="form-group">
<label for="StartDate">Start Date</label>
<input type="text" id="StartDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
<label for="EndDate">End Date </label>
<input type="text" id="EndDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#StartDate").datepicker({
dateFormat: 'mm/dd/yyyy',
onSelect: function (selected) {
$("#EndDate").datepicker("option", "minDate", selected)
}
});
$("#EndDate").datepicker({
dateFormat: 'mm/dd/yyyy',
onSelect: function (selected) {
$("#StartDate").datepicker("option", "maxDate", selected)
}
});
我也尝试过删除 HTML 中的一些数据属性,并将它们添加到 javascript 中的日期选择器方法中,但无济于事。
我也尝试使用以下问题的解决方案,但无济于事:
- how to compare two datepicker date jquery
- Twitter Bootstrap datepicker: how to enable only specific daterange
我发现的大多数示例似乎都使用 JQuery UI 1.9.2。我只使用 JQuery 1.9.1 而不是 UI。这有区别吗?
我是 javascript 和所有其他网络内容的新手,所以我确信我遗漏了一些非常简单的东西,但我们将不胜感激。
好吧,看来我找到了自己的答案。
原来我使用的是两个不同插件的组合..糟糕。因此,如果其他人在始终验证开始日期 < 结束日期以及限制初始开始和结束日期方面遇到问题,这就是我能够开始工作的方法。
$("#StartDate").datepicker({
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#EndDate').datepicker('setStartDate', minDate);
});
$("#EndDate").datepicker({
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#StartDate').datepicker('setEndDate', minDate);
});
抱歉,如果我的标题不好。如果重要的话,我还应该首先提到这是一个 MVC 应用程序。
这就是我想要做的。我希望我的日期选择器具有以下要求:
- 开始日期的范围必须是今天 - 45 天前
- 结束日期不能超过今天
- 结束日期必须在开始日期之后
以下是我到目前为止所做的尝试,前 2 颗子弹已经起作用:
HTML
<div class="col-md-6 row">
<div class="form-group">
<label for="StartDate">Start Date</label>
<input type="text" id="StartDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
<label for="EndDate">End Date </label>
<input type="text" id="EndDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#StartDate").datepicker({
dateFormat: 'mm/dd/yyyy',
onSelect: function (selected) {
$("#EndDate").datepicker("option", "minDate", selected)
}
});
$("#EndDate").datepicker({
dateFormat: 'mm/dd/yyyy',
onSelect: function (selected) {
$("#StartDate").datepicker("option", "maxDate", selected)
}
});
我也尝试过删除 HTML 中的一些数据属性,并将它们添加到 javascript 中的日期选择器方法中,但无济于事。
我也尝试使用以下问题的解决方案,但无济于事:
- how to compare two datepicker date jquery
- Twitter Bootstrap datepicker: how to enable only specific daterange
我发现的大多数示例似乎都使用 JQuery UI 1.9.2。我只使用 JQuery 1.9.1 而不是 UI。这有区别吗?
我是 javascript 和所有其他网络内容的新手,所以我确信我遗漏了一些非常简单的东西,但我们将不胜感激。
好吧,看来我找到了自己的答案。
原来我使用的是两个不同插件的组合..糟糕。因此,如果其他人在始终验证开始日期 < 结束日期以及限制初始开始和结束日期方面遇到问题,这就是我能够开始工作的方法。
$("#StartDate").datepicker({
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#EndDate').datepicker('setStartDate', minDate);
});
$("#EndDate").datepicker({
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#StartDate').datepicker('setEndDate', minDate);
});