Tempus Dominus Timepicker показывает время после выбора даты - PullRequest
Новая
       33

Tempus Dominus Timepicker показывает время после выбора даты

0 голосов
/ 26 февраля 2020

Я использую Tempus Dominus Timepicker v5.0.1 с jquery 3.4.1 и последней версией момента. 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 будет прослушивателем событий, который я искал, но он запускается при первом нажатии на текстовое поле, потому что значение меняется с нуля на текущую дату. Я также не уверен, что мне нужно будет позвонить, чтобы появилось время при выборе даты.

...