Search code examples
validationkendo-uikendo-asp.net-mvckendo-datepicker

How do you make a kendo datepicker do date validation for a minimum date?


I have the following control:

@(Html.Kendo().DatePickerFor(model => model.Attributes.DueDate)
    .HtmlAttributes(new { 
        ID = "idSurvey_DueDate", 
        @data_bind = "value: DueDate", 
        @Class = "report-label datepicker surveyAttributesData", 
        TabIndex = 3 })
    .Min(DateTime.Now)                                                            
)

And the following jquery:

$("#idSurvey_DueDate").kendoValidator({
    rules: {
        dateValidation: function (e) {
            var currentDate = kendo.parseDate($(e).val());
            // Check if date parse was successful
            if (!currentDate) {
                return false;
            }
            return true;
        }
    },
    messages: {
        dateValidation: "Invalid Date!",
        min: "Date must not be in the past!"
    }
});

When I test this out and enter in an invalid date the message I get isn't what I expect. Instead it is "The field DueDate must be a date." Where is this mystery message coming from and why isn't it using the messages property I put in the validator? All I want is for non-valid date formats to not be allowed and for the date to not be in the past. So a minimum must be enforced.


Solution

  • This code seems to work fine:

    $("form").kendoValidator({
      rules: {
        dateValidation: function(element) {
          var value = $(element).val();
    
          var date = kendo.parseDate(value);
          if (!date) {
            return false;
          }
    
          return true;
        },
        minDate: function(element) {
          var value = $(element).val();
    
          var date = kendo.parseDate(value);
    
          var result = date >= new Date();
    
          return result;
        }
      },
      messages: {
        dateValidation: "You must enter a date",
        minDate: "The date must not be in the past"
      }
    });
    

    Here is a live demo: http://jsbin.com/EvoroRe/1/edit