Как обновить jQuery datetimepicker, основываясь на событии select onChange - PullRequest
Новая
       22

Как обновить jQuery datetimepicker, основываясь на событии select onChange

0 голосов
/ 22 марта 2019

Обратите внимание, что этот вопрос о datetimepicker НЕ datepicker.

У меня есть 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 
}

Любая помощь будет оценена.

1 Ответ

1 голос
/ 22 марта 2019

Чтобы сделать это, вам нужно изменить параметры элемента DateTimpePicker.

2 вещи, которые нужно знать:

  • $('#date_from').data("DateTimePicker").options(), чтобы получить все параметры вашегоelement.
  • Чтобы изменить эти параметры - дату в вашем случае - вы можете добавить новую дату-время в параметре метода 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>
...