How to update jQuery datetimepicker based on select onChange event

Question

Please note this question is about datetimepicker NOT datepicker.

I have a datetimepicker that is initialised to the current date. When user selects an option in a select element, I want to update the datetimepicker based on the selected date. Here is my code:

$("#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 
}

Any help would be appreciated.

Answer 1

To do that, you need to change the options of your DateTimpePicker element.

2 things to know :

• $('#date_from').data("DateTimePicker").options() get you all the options of your element.
• To change these options - the date in your case - you can add your new datetime in the paramater of the option method.

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
               });
    });

Snippet

$("#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>