如何在更改时为引导程序datetimepicker设置minDate和maxDate

时间:2014-11-17 16:56:21

标签: javascript twitter-bootstrap-3 datetimepicker

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

这是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的类似问题,否则请不要标记重复。

3 个答案:

答案 0 :(得分:13)

根据Linked Pickers example中的Bootstrap datetimepicker documentation,这应该有效。

开始:

 .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

答案 1 :(得分:2)

  1. 开始日期

    .on('dp.change', function (selected) {
        end.data("DateTimePicker").minDate(selected.date);
     });
    
  2. 结束日期

    .on('dp.change', function (selected) {
        start.data("DateTimePicker").maxDate(selected.date);
     });
    
  3. 套餐升级:                                                                日期timepicker软件包已升级到最新版本,我们可以使用'maxDate()'代替'setMaxDate()'和'minDate()'代替'setMinDate()',因为最近的选项考虑了在hrs和提供maxDate / minDate选项时的分钟。

答案 2 :(得分:0)

尝试使用:

$('.datepickerProjectDate').data("DateTimePicker").minDate('2018-09-15');