如何使用 jqueryui 在表单中使用 datepicker？

Posted 2023-05-08

【中文标题】如何使用 jqueryui 在表单中使用 datepicker？

【英文标题】：How to use datepicker in your form using jqueryui?

【发布时间】：2021-01-13 22:24:42

【问题描述】：

我需要一些帮助来使用我的复选框，用户将使用复选框以便在使用复选框锁定直到时立即显示日期选择器或日历。在 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>

【问题讨论】：

您是否添加了使用datepicker所需的cdn？

@Swati 有一个解决方法，现在我的日期选择器没有显示这个问题，需要一些帮助来发布这个更新的逻辑。

注意可以使用$("#datepicker").toggle($(this).is(":checked"))来减少onClickCheckBox中的代码量。请注意，您在 jQuery（使用 on('click'）和 HTML（使用 onclick="）中都附加了事件侦听器，这可能会导致问题。

@Heretic 在我将这个逻辑重做这个逻辑后，检查和取消检查正在工作，这个逻辑正在更新到论坛。但是现在问题 Texbox 没有显示日期选择器，需要一些帮助。

您没有在更新的代码中初始化日期选择器？即：$('#TextValue').datepicker(..

【参考方案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/