How to validate KendoUI DatePicker

KendoUI Date Picker validation provided by KendoUI framework are very limited as it comes with only the “required” field validation which does not cater for invalid input validation. Things can get even more complicated when we use it for different “Culture” (data representation varied according to country).

Below is a simple validation that we used, it leverages on the JavaScript Date parser 😉

Below is the razor kendoui date picker with “required” validation.

@(Html.Kendo().DatePicker()
.Name("datePickerStartDate")
.Value(DateTime.Today.ToString("yyyy-MM-ddTHH\\:mm\\:ss.fffffffzzz"))
.Max(DateTime.Today.ToUniversalTime().AddDays(30))
.Min(DateTime.Today.ToUniversalTime())
.Events(e => e.Change("startDateChange"))
.Format("yyyy-MMM-dd")
.HtmlAttributes(new { @required = true, @validationMessage = "start date is required" })
)

Below is the additional validation we test before using the value return.


var startDate = $("#datePickerStartDate").data("kendoDatePicker").value();
if (startDate != null) {
// Valid startDate captured.
}
Advertisements

4 comments


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s