Validation

Updated on Aug 14, 2026

The DateTimePicker is designed to keep its input value unchanged even when the typed date is invalid.

This behavior is set because of the following reasons:

• The DateTimePicker allows you to use different formats for date parsing which require unrestricted user input. For more information, refer to the ParseFormats option.
• The DateTimePicker does not automatically update the typed text when the typed text is invalid. Such a change in the input value may lead to unexpected behavior.

To validate the input value of the DateTimePicker, use a client-validation framework such as the Kendo UI Validator for jQuery. In this way, you can provide an error message to end users which prompts them to do the right actions for them to resolve the issue.

Server-Side Validation

Use the DateTimePickerFor method with DataAnnotations to validate the DateTimePicker value on the server. The following example marks the field as required and limits the value to a specific date range.

C#

public class AppointmentViewModel
{
    [Required]
    [Range(typeof(DateTime), "01/01/2026", "12/31/2026")]
    public DateTime? AppointmentDate { get; set; }
}

Razor

@model AppointmentViewModel

<form asp-action="Save" method="post">
    @(Html.Kendo().DateTimePickerFor(model => model.AppointmentDate))

    @Html.ValidationMessageFor(model => model.AppointmentDate)
    <button type="submit">Save</button>
</form>

Client-Side Validation

Initialize the Kendo UI Validator on the form to validate the DateTimePicker input before the form is submitted. Add a custom rule when the value must satisfy a condition that is not covered by the built-in rules.

Razor

<form id="appointment-form">
    @(Html.Kendo().DateTimePicker()
        .Name("AppointmentDate"))

    <button type="submit">Save</button>
</form>

<script>
    $("#appointment-form").kendoValidator({
        rules: {
            businessHours: function(input) {
                if (input.is("[name='AppointmentDate']") && input.val()) {
                    var value = input.data("kendoDateTimePicker").value();
                    return value && value.getHours() >= 9 && value.getHours() < 17;
                }

                return true;
            }
        },
        messages: {
            businessHours: "Choose an appointment between 9:00 AM and 5:00 PM."
        }
    });
</script>

See Also

• Server-Side API