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

Question

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.

Liverpudlian

Are you using server side validation via DataAnnotations or FluentValidation? – Wendel

I'm using neither as far as I can tell? – Liverpudlian

Answer 1

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

Cadaverine

I ended up not using the kendoValidator and using an errors list instead but your code would work too so I will upvote it. It just puts the error message text in the way of the other forms when I use the kendoValidator and I wanted it up in a central location instead. – Liverpudlian

Answer 2

I suggest to add the mvcdate rule:

rules: {
    mvcdate: function (input) {
        var datarole = $(input).data('role');
        if (datarole === 'datepicker') {
            var value = $(input).val();
            if (value) {
                var date = kendo.parseDate(value, 'ddd, MMM d');
                if (!date) {
                    return false;
                }
            }
        }

        return true;
    }
},
messages: {
    mvcdate: function (intput) {
        return intput.attr('data-val-date');
    }
}

Unfortunatelly dateValidation rule has a lower priority that date and mvcdate just because they are default and nor custom one. As I have understood the mvcdate rule has the highest priority because:

• dateValidation rule has been skipped for the certain control and I got the 'must be a date' error
• date rule has been passed with the TRUE result but I still got the 'must be a date' error
• mvcdate rule has helped me alone.

You always can look to the kendoValidator in the console:

Telescopium

Answer 3

I'm not sure if the kendo validator changed since the accepted answer, but you'll want to filter out and only apply date validation to datepicker inputs. Otherwise a textbox or other input will generate an error message about an invalid date. The rules should look like

$("#modForm").kendoValidator({
    rules: {
        dateValidation: function (input) {
            if (input.is('[data-role="datepicker"]')) {
                var value = $(input).val();

                var date = kendo.parseDate(value);
                if (!date) {
                    return false;
                }
            }
            return true;
        }
    },
    messages: {
        dateValidation: "You must enter a date",
    }
});

Spitsbergen