如何根据select onChange事件更新jQuery datetimepicker

Question

请注意这个问题是关于datetimepicker NOT datepicker。

我有一个datetimepicker初始化为当前日期。当用户在select元素中选择一个选项时，我想根据所选日期更新datetimepicker。这是我的代码：

$("#date_from").datetimepicker({
    format: 'D MMM Y - H:mm',
    defaultDate: new Date(),
    stepping: 10,
    minDate: new Date()
});

$('select').on('change', function (e) {
    updating_date = this.value; // gives a value like 2019-04-06 10:30:00
    // I want to update the datetimepicker to reflect updating_date 
}

任何帮助，将不胜感激。

Answer 1

为此，您需要更改DateTimpePicker元素的选项。

2件事要知道：

• $('#date_from').data("DateTimePicker").options()为您提供元素的所有选项。
• 要更改这些选项 - 您的案例中的日期 - 您可以在option方法的参数中添加新的日期时间。

关于此链接的信息：https://eonasdan.github.io/bootstrap-datetimepicker/Options/#date

    $('select').on('change', function (e) {
        var updating_date = new Date('2019-04-06 10:30:00');
          $('#date_from')
              .data("DateTimePicker")
              .options({
                    'date': updating_date
               });
    });

片段

$("#date_from").datetimepicker({
    format: 'D MMM Y - H:mm',
    defaultDate: new Date(),
    stepping: 10,
    minDate: new Date()
});

$('select').on('change', function (e) {
    var updating_date = new Date('2019-04-06 10:30:00');
    //console.log($('#date_from').data("DateTimePicker").options());
        $('#date_from')
      .data("DateTimePicker")
      .options({
      'date': updating_date});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<select>
  <option value="">Monday</option>
  <option value="">Friday</option>
</select>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='date_from'>
                    <input type='text' class="form-control" />
                </div>
            </div>
        </div>
    </div>
</div>