How do you make a kendo datepicker a date for checking a date 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 check this and enter an invalid date, the message I receive is not what I expect. Instead, this field "Longitude must be a date". Where does this mysterious message come from and why does it not use the message property that I put in the validator? All I want is invalid date formats that cannot be resolved and that the date is not in the past. Therefore, a minimum must be observed.

Answer 1

This code works 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

Answer 2

I suggest adding 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 date and mvcdate only because they are standard and non-standard. As I understand it, the mvcdate rule has the highest priority, because:

• dateValidation rule was skipped for a specific control, and I got a "must be date" error Rule
• date was passed with the result TRUE, but I still got the error "must be date"
• mvcdate rule helped me one.

You can always look at kendoValidator in the console:

Answer 3

Try this. Use the error class that Kendo currently provides. Kendo will automatically highlight the field in red if the user has inserted invalid text but does not stop submitting the form. During the save, make sure that the element has an appropriate class, and if it satisfies the comparison with your minimum date value (whatever it is), stop the user saving.

 $(document).ready(function () { var dateName = $('#Date');//some date picketer var d = new Date(); var minDate = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear(); //obviously, the d.getDate() and d.getFullYear() can be whatever you want dateName.focus(); dateName.change(function () { if (dateName.hasClass('input-validation-error')) { dateName.removeClass('input-validation-error'); } }); $('#btn_SavePage').click(function () { var dateValue = dateName.val(); if (dateName.hasClass('input-validation-error')) { alert('You must select a date.'); } else if (dateValue <= minDate) { alert('The selected date must be greater than ' + minDate); } else { $('#btn_ClosePage').trigger({ type: 'click', updateSuccess: true, dateValue: dateValue }); } }); }); 

Answer 4

I'm not sure if the kendo validator has changed after the accepted answer, but you will want to filter and apply date validation only to DatePicker inputs. Otherwise, a text field or other input will generate an error message about an invalid date. The rules should look like this:

 $("#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", } });