Question

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

这是代码：

     "grantInfo": {
      "id": "{ID-VALUE}",
      "audience": "https://{AUTHO-DOMAIN-NAME}/api/v2",
      "scope": "openid profile email",
      "expiration": null
    },

我在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中选择日期后，以编程方式切换到时间视图？

1 个答案: