在我单击 Datepicker 控件外部之前，不会触发 Kendo Datepicker 更改事件

Posted 2023-05-07

【中文标题】在我单击 Datepicker 控件外部之前，不会触发 Kendo Datepicker 更改事件

【英文标题】：The Kendo Datepicker change event does not fire until I click outside of Datepicker control

【发布时间】：2017-09-30 07:13:30

【问题描述】：

我有以下带有 datepicker 更改事件的 ASP.NET MVC 表单：

<div id="container">
    @using (html.BeginForm("Reload", "DateOfFile", FormMethod.Post, new  returnUrl = this.Request.RawUrl, id = "formDate" ))
    
       @(Html.Kendo().DatePicker()
          .Name("DateOfFile")
          .Value(Session["DateOfFile"] == null ? DateTime.Now : Convert.ToDateTime(Session["DateOfFile"].ToString()))
          .Events(e => e
          .Change("dt_picker_change")
          )
        )
          @Html.Hidden("returnUrl", this.Request.RawUrl)

           <script>
                function dt_picker_change() 
                    $("#container").kendoValidator(
                       rules: 
                          dateValidator: function (input) 
                          var value = $(input).val();
                          var date = kendo.parseDate(value);
                          //alert(date)
                          if (!date) 
                              return false;
                          
                          $("#formDate").submit();
                       
                    ); 
                
           </script>
     
</div>

在上面的代码中，表单仅在我单击 DatePicker 控件之外的某个位置时提交，但它需要在日历中更改日期时立即提交。

我错过了什么？

【问题讨论】：

似乎它按预期工作，任何文本输入上的更改事件只会在失去焦点时触发。您可能必须根据日历点击或其他内容制作自己的事件。看起来很乱，所以你可能要重新考虑这个要求。

@gene 你试过下面的解决方案吗？有用吗？

【参考方案1】：

您是否尝试在验证器上设置 validateOnBlur: false 并验证更改事件的输入？

<div id="container">
        @using (Html.BeginForm("Reload", "DateOfFile", FormMethod.Post, new  returnUrl = this.Request.RawUrl, id = "formDate" ))
        
           @(Html.Kendo().DatePicker()
              .Name("DateOfFile")
              .Value(Session["DateOfFile"] == null ? DateTime.Now : Convert.ToDateTime(Session["DateOfFile"].ToString()))
              .Events(e => e
              .Change("dt_picker_change")
              )
            )
              @Html.Hidden("returnUrl", this.Request.RawUrl)

               <script>
                    function dt_picker_change() 
                       $("#container").kendoValidator().data("kendoValidator").validate();
                    

                    $("#container").kendoValidator(
                           validateOnBlur: false,
                           rules: 
                              dateValidator: function (input) 
                              var value = $(input).val();
                              var date = kendo.parseDate(value);


                              //alert(date)
                              if (!date) 
                                  return false;
                              
                              $("#formDate").submit();
                           
                        ); 

               </script>
         
    </div>

【参考方案2】：

我的建议是将整个“脚本”代码块放在“div='container'”之外。