gcogco10 Ответов: 1

Как очистить datepicker, когда unchecked-box используется в jquery?

Привет Команда

Я пытаюсь сделать логику вокруг, когда мой unchecked-box используется, чтобы очистить datepicker. Теперь он вообще этого не делает, и ему нужна какая-то помощь, пожалуйста, команда.

Что я уже пробовал:

@using (Html.BeginForm("Modules", "Home", FormMethod.Post))
                                   {
                                       @Html.CheckBoxFor(model => model.Lockuntil, new { @class = "rb", data_toggle = "hide-element", data_target = "#datepicker17" })
                                       @Html.LabelFor(model => model.Lockuntil, new { @class = "form-check-label" })
                                       @Html.TextBoxFor(model => model.DateColumn, new { id = "datepicker" })
                                   }


<!--Jquery for checking datepicker-->
                    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
                    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                    <script type="text/javascript">
                        $(function () {
                            var toggleHideElement = function (chk) {
                                var target = $(chk.getAttribute("data-target"));
                                if (chk.checked) {
                                    target.removeClass("d-none").attr("aria-hidden", "false");
                                }
                                else {
                                    target.addClass("d-none").attr("aria-hidden", "true");
                                }
                            };

                            // Change the state of the target element when the box is checked / unchecked:
                            $(document).on("change", "input:checkbox[data-toggle='hide-element']", function () { toggleHideElement(this); });

                            // Set the initial state of the target element:
                            $("input:checkbox[data-toggle='hide-element']").each(function () { toggleHideElement(this); });
                        });

                        // Another function call for DatePicker.
                        $(function () {
                            $("#datepicker").datepicker();
                        });
                    </script>

1 Ответов

Рейтинг:
1

Richard Deeming

Скрыть средство выбора даты, если этот флажок не установлен:

var toggleHideElement = function (chk, fromLoad) {
    var target = $(chk.getAttribute("data-target"));
    if (chk.checked) {
        target.removeClass("d-none").attr("aria-hidden", "false");
        if (!fromLoad) { target.focus().datepicker("show"); }
    }
    else {
        target.addClass("d-none").attr("aria-hidden", "true");
        if (!fromLoad) { target.datepicker("hide"); }
    }
};


// Change the state of the target element when the box is checked / unchecked:
$(document).on("change", "input:checkbox[data-toggle='hide-element']", function () { toggleHideElement(this, false); });

// Set the initial state of the target element:
$("input:checkbox[data-toggle='hide-element']").each(function () { toggleHideElement(this, true); });

gcogco10

Хорошо, Ричард, то, что я хочу, это когда я нажимаю на флажок, он должен показать мне datepicker, который я создал на второй функции, когда я снял флажок, то он должен очистить datepicker от модальной формы, надеюсь, сделать ясность теперь извините за то, что не ясно.

Richard Deeming

Предполагая, что вы используете jQuery UI datepicker, вызовите его метод "show", когда флажок установлен, и вызовите его метод "hide", когда флажок снят:
Элемент управления datepicker виджет | API-интерфейса на jQuery пользовательского интерфейса, документации[^]

Вероятно, вы захотите избежать этого при загрузке страницы.