Question

我有eventStartDate和eventEndDate。

选择开始日期后，我想设置结束日期的最短和最晚日期。

下面的代码有效，有一个怪癖：

当您选择结束日期时，它不会首次接受日期，而是默认为今天的日期。当你再次选择它时，它可以工作。

  $('#start_date_picker').on('dp.change', function () {

    let eventStartDate = moment($('#start_date').val(), 'DD/MM/YYYY');
    let minEventEndDate = eventStartDate.clone().add(1, 'days');
    let maxEventEndDate = eventStartDate.clone().add(30, 'days');

    $('#end_date_picker').data("DateTimePicker").clear();
    $('#end_date_picker').data("DateTimePicker").maxDate(maxEventEndDate);
    $('#end_date_picker').data("DateTimePicker").minDate(minEventEndDate);
});

Answer 1

我猜HTML中没有#start_date元素。

如果您想在end_date_picker中选择日期后设置minDate＆＃39; maxDate和#start_date_picker，则可以使用{{3}的变量通过了。

e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null 
}

＆＃13;

$(function () {
  $('#start_date_picker').datetimepicker();
  $('#end_date_picker').datetimepicker();
});

$('#start_date_picker').on('dp.change', function (e) {

    let eventStartDate = moment(e.date, 'DD/MM/YYYY');
    let minEventEndDate = eventStartDate.clone().add(1, 'days').startOf('day');
    let maxEventEndDate = eventStartDate.clone().add(30, 'days').endOf('day');

    $('#end_date_picker').data("DateTimePicker").clear();
    $('#end_date_picker').data("DateTimePicker").maxDate(maxEventEndDate);
    $('#end_date_picker').data("DateTimePicker").minDate(minEventEndDate);
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='start_date_picker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<div class='input-group date' id='end_date_picker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

＆＃13;

无法在eonasdan datetimepicker

1 个答案: