Question

我有以下带有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控件之外的某个位置时提交，但需要在日历中更改日期后立即提交。

我错过了什么？

Answer 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>

Answer 2

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

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

2 个答案: