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

Question

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

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

$("#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 方法的参数中添加新的日期时间。

Info on this link : 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>

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

How to update jQuery datetimepicker based on select onChange event

jquery

datetimepicker

eonasdan-datetimepicker