1

I have the following ASP.NET MVC form with a datepicker change event:

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

In the code above, the form only submitted when I click somewhere outside the DatePicker control, but it need to submit as soon as the date is changed in calendar.

What am I missing?

tereško
  • 58,060
  • 25
  • 98
  • 150
gene
  • 2,098
  • 7
  • 40
  • 98
  • Seems like it's working as expected, the change event on any text input will only fire when focus is lost. You'll probably have to make your own event based on the calendar click or something. Seems very messy, so you might want to reconsider this requirement. – Seano666 May 02 '17 at 23:14
  • @gene did u try the solution below? Does it work? – Giovanni Romio May 05 '17 at 12:09

2 Answers2

0

Have you tried to set validateOnBlur: false on your validator and to validate the input on change event?

<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>
Giovanni Romio
  • 1,008
  • 1
  • 11
  • 30
0

My suggestion is to take your whole "script" block of code and place it OUTSIDE your "div='container'".

David Craft
  • 11
  • 1