0

我正在将 Tempus Dominus Timepicker v5.0.1 与 jquery 3.4.1 和最新版本的 moment.js 一起使用。我有一个表格，其中包含注册开始日期和时间以及注册结束日期和时间。我希望用户能够选择日期，并且在他们单击日期后我希望时间自动出现（相当于单击底部的时钟按钮）。

我有我的看法：

<div class="form-row">
    <div class="col-md-4 col-lg-3 mb-3">
        @Html.LabelFor(m => m.RegistrationStartDate, new { @class = "font-weight-bold label-required" })
        @Html.TextBoxFor(m => m.RegistrationStartDate, new { @class = "form-control datetimepicker-input", placeholder = RecruitClassResource.RegistrationStartDate, required = "required", id="datetimepicker1", data_toggle="datetimepicker", data_target="#datetimepicker1" })
        @Html.ValidationMessageFor(m => m.RegistrationStartDate)
    </div>
</div>
<div class="form-row">
    <div class="col-md-4 col-lg-3 mb-3">
        @Html.LabelFor(m => m.RegistrationEndDate, new { @class = "font-weight-bold label-required" })
        @Html.TextBoxFor(m => m.RegistrationEndDate, new { @class = "form-control datetimepicker-input", placeholder = RecruitClassResource.RegistrationEndDate, required = "required", id="datetimepicker2", data_toggle="datetimepicker", data_target="#datetimepicker2" })
        @Html.ValidationMessageFor(m => m.RegistrationEndDate)
    </div>
</div>

javascript:

@section Scripts {
    @Scripts.Render("~/Scripts/moment.min.js")
    @Scripts.Render("~/Scripts/tempusdominus-bootstrap-4.js")

    <script>
        $(document).ready(function () {
            $('.datetimepicker-input').datetimepicker({
                icons: {
                    time: "far fa-clock"
                }
            });

            $('.datetimepicker-input').on('change.datetimepicker', function (e) {
                // Just a test to see when this event is fired
                alert(e.date);
            });
        });
    </script>
}

我想也许 change.datetimepicker 将是我正在寻找的事件侦听器，但它在我第一次单击文本框时被触发，因为值从 null 更改为当前日期。我也不确定在选择日期时我需要调用什么来显示时间。

4

1 回答 1

0

我有一个 JSFiddle 给你，它可以满足你的需求，我的朋友 -> https://jsfiddle.net/8ta5j6v7/2/。

这是代码：

<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.
  });
});
于 2020-05-20T16:25:56.257 回答