Kendo UI Datepicker with custom format of "MMMyy"

Question

I am trying to create a kendo datepicker for a binded model field, but with a format of "MMMyy" as opposed to a full date. The user needs to see the date in the format "MMMyy".

Here is my model field:

[DisplayFormat(DataFormatString = "{0:MMMyy}")]
public DateTime? DeliveryMonthDate { get; set; }

And here is my dateicker in a form in the view:

@Html.LabelFor(model => model.DeliveryMonthDate, new { @class = "caption text-bold" }, true)
@(Html.Kendo().DatePickerFor(model => model.DeliveryMonthDate)
.Name("DeliveryMonthDate")
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
.Format("MMMyy")
.ParseFormats(new string[] { "MMMyy" })
)
@Html.ValidationMessageFor(model => model.DeliveryMonthDate)

When the user selects a month from the datepicker, the value correctly displays in the MMMyy format (e.g. Nov18). However, the validation error (This field must be a date) occurs because it is not a valid date format.

How do I validate that a correct month and year has been input in the datepicker in the format "MMMyy"?

Answer 1

The custom format also will be used to parse the input. https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/configuration/format

The solution can be displaying que custom format in the date picker but having a hidden field for submitting the valid date format. The hidden field can be updatedon the change event. https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/events/change