Datepicker Default to Empty on Initial Open

[Reafidy]

I have a datepicker databound to a model as follows:

  <div class="col-sm-3">
            <label asp-for="ADR.Date" class="form-label"></label>
            <kendo-datepicker for="ADR.Date" class="form-control"></kendo-datepicker>
            <span asp-validation-for="ADR.Date" class="text-danger"></span>
   </div>

The ADR model property does not allow nulls:

[DataType(DataType.Date)]
public DateTime Date { get; set; }

This is for good reason, I want to prevent the user from omitting the date when they fill out the form and for the data validation to fire correctly.

However instead of being empty when the form is first opened, the Datepicker fills the date with 01/01/1901, which is unwanted behavior as the user then doesn't enter a correct date.

How do we ensure the datepicker is empty when first loading the form and the calendar is on todays date when empty?

 

[Stoyan]

Hello Reafidy,

When you bind an editor component to the Model the value of the component is set automatically to equal that of the Model. When the value of the Model property is null the DatePicker defaults to 01/01/1901.

To overcome this add the following code on the client-side to clear the input of the DatePicker:

$(document).ready(function () {
        var datepicker = $("#ADR.Date").data("kendoDatePicker");
        datepicker.value(null);
        datepicker.setOptions({ format: "MM/dd/yyyy" })
});

I hope the information above is useful.

Regards,
Stoyan
Progress Telerik