如何在更改时为引导程序datetimepicker设置minDate和maxDate [英] How to set minDate and maxDate for bootstrap datetimepicker on change

问题描述

我想使用bootstrap datetimepicker向用户询问日期范围。开始日期有一个字段，结束日期有另一个字段，它们初始化为当天前一天。在更改开始日期时，我想将结束日期的minDate设置为开始日期的值;在更改为结束日期时，我想将开始日期的最大日期设置为结束日期的值。但我不能让这个工作。

I want to ask users for a date range using bootstrap datetimepicker. There is a field for the start date and another one for the end date, and they're initialized to the day before current day. On change to the start date, I want to set the minDate of end date to the value of start date; and on change to end date I want to set the max date of start date to the value of end date. But I cannot get this working.

这是JS代码：

var start = $('.start');
var end = $('.end');
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate() - 1;
var year = d.getFullYear();

start.datetimepicker(
    {
        useCurrent: false,
        defaultDate: month + '-' + day + '-' + year + ' ' + '12:00AM',
        autoClose: true
     })
 .on('change', function (selected) {
    end.minDate(selected.?????????); // What should replace the question marks?
 });
end.datetimepicker(
    {
        useCurrent: false,
        defaultDate: month + '-' + day + '-' + year + ' ' + '11:59PM',
        autoClose: true
     })
 .on('change', function (selected) {
    start.maxDate(selected.???????); // What should replace the question marks?
 });

和HTML：

<div class="col-sm-3">
    <div class="form-group">
        <h4>Start Date</h4>
        <div class="input-group date">
            <input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="startDate" id="Calendar1" class="start form-control" placeholder="Choose a date" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class="col-sm-3">
    <div class="form-group">
        <h4>End Date</h4>
        <div class="input-group date">
            <input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="endDate" id="Calendar2" class="end form-control" placeholder="choose a date" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

我在 datepicker ，但这与 datetimepicker 不同，所以请不要标记重复，除非您找到类似的问题 datetimepicker 。

I've found tickets about similar operation on datepicker, but that is done differently from datetimepicker so please don't mark duplicate unless you find similar question for datetimepicker.

推荐答案

基于链接选择器示例在 Bootstrap datetimepicker文档，这应该有效。

开始：

 .on('dp.change', function (selected) {
    end.data("DateTimePicker").minDate(selected.date);
 });

结束：

 .on('dp.change', function (selected) {
    start.data("DateTimePicker").maxDate(selected.date);
 });

注：

旧版本Bootstrap datetimepicker（小于v4），使用 .setMinDate 和 .setMaxDate

On older versions of Bootstrap datetimepicker (less than v4), use .setMinDate and .setMaxDate

这篇关于如何在更改时为引导程序datetimepicker设置minDate和maxDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！