如何使用 jqueryui 在你的表单中使用日期选择器？

Question

我需要一些帮助来使用我的复选框，其中用户将使用复选框以便在使用复选框锁定直到时立即显示日期选择器或日历。在 jquery 方面需要一些帮助才能使我的逻辑正常运行。当用户在使用日历或日期选择器锁定后取消选中时，这必须隐藏。我也收到 datepicker is not a function....?

<div class="form-group row">
            <div class="col-sm-2">
                @Html.CheckBoxFor(model => model.Lockuntil, new { @class = "rb", id = "Lockuntil" })

            </div>
            <div class="form-group row">
                <div class="col-sm-1">
                    @Html.TextBoxFor(model => model.DateSelect, new { @class = "datepicker", id = "TextValue" })
                </div>
            </div>
        </div>

        <!--Jquery for datechecking-->
        <script type="text/javascript">
            $(document).ready(function () {

                $('#Lockuntil').on('click', onClickCheckBox); // bind an event with checkbox on click. On click function onClickCheckBox will be called.

                onClickCheckBox(); // to hide or show on page load.c
            });

            function onClickCheckBox() // logic to show hide textbox based on checkbox's value.
            {
                if ($('#Lockuntil').is(":checked")) {
                    $("#TextValue").show();
                }
                else {
                    $("#TextValue").hide();
                }
            }
        </script>

Answer 1

考虑以下示例。

$(function() {
  $('.form-group').on('click', '.rb', function(e) {
    if ($(this).is(":checked")) {
      $("#TextValue").datepicker("enable");
    } else {
      $("#TextValue").datepicker("disable");
    }
  });
  $("#TextValue").datepicker();
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group row">
  <div class="col-sm-2">
    <input type="checkbox" class="rb" id="Lockuntil" checked />
  </div>
  <div class="form-group row">
    <div class="col-sm-1">
      <input type="text" class="datepicker" id="TextValue" />
    </div>
  </div>
</div>

您必须包含所有正确的库。然后，您必须初始化要使用的 UI 个小部件。

查看更多：https://jqueryui.com/datepicker/

如何使用 jqueryui 在你的表单中使用日期选择器？

How to use datepicker in your form using jqueryui?

asp.net-mvc

jquery

jquery-ui

bootstrap-4