在 Tempus Dominus Bootstrap 4 datetimepicker 中选择日期后以编程方式切换到时间视图？

Question

在 Tempus Dominus 中选择日期后如何以编程方式切换到时间视图 Bootstrap 4 datetimepicker？

这是代码：

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

我在 documentation 和网上进行了搜索，但找不到答案。谢谢！

Answer 1

嗯，

虽然这个问题很老了，但我不会说这是不可能的，它需要修改库。

这是工作代码：

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

这是工作 JSFiddle。

希望对您有所帮助。

在 Tempus Dominus Bootstrap 4 datetimepicker 中选择日期后以编程方式切换到时间视图？

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

jquery

bootstrap-4

tempus-dominus-datetimepicker