jquerybootstrap-4tempus-dominus-datetimepicker

Switch programmatically to time view after the date is selected in Tempus Dominus Bootstrap 4 datetimepicker?


How can I switch programmatically to time view after the date is selected in Tempus Dominus Bootstrap 4 datetimepicker?

This is the code:

$("#datetimepicker1").on("change.datetimepicker", function (e) {
  // After the date is selected, I would like to switch to time view automatically / programmatically
});

I searched in the documentation and the web, but couldn't find an answer. Thank you!


Solution

  • Well,

    though this question is pretty old, I wouldn't say that this is impossible and that it requires modifying the library.

    Here is the working code:

    <div class="container" style="padding: 80px;">
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
              <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
              <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    $(function() {
      $("#datetimepicker1").datetimepicker();
      var $picker = $("#datetimepicker1");
      $picker.on("change.datetimepicker", function (e) {
        // After the date is selected, I would like to switch to time view automatically / programmatically
        if (!e.oldDate && $picker.datetimepicker('useCurrent')) {
          // First time ever. If useCurrent option is set to true (default), do nothing
          // because the first date is selected automatically.
          return;
        }
        else if (
          e.oldDate &&
          e.date &&
          (e.oldDate.format('YYYY-MM-DD') === e.date.format('YYYY-MM-DD'))
        ) {
          // Date didn't change (time did).
          return;
        }
    
        setTimeout(function () {
          $('#datetimepicker1 [data-action="togglePicker"]').click();
        }, 300); // With a mini delay so that the animation doesn't fire right-away.
      });
    });
    

    Here is the working JSFiddle.

    I hope this helps you.