How to set date format for event editor window

[Lucas]

Hi,

How can I set the date format of the datetimepicker when editing a calendar event?  The current date format is "MM/dd/yyyy hh:mm tt" and I'd like to change it to be "dd MMM yyyy hh:mm tt".

I've been able to customise the date formats everywhere else in the Scheduler, but can't find where to change the format when creating or editing an event.

Thanks.

[Georgi Krustev]

Hello Lucas,

There are two options to modify the edit form of the grid:

1. Use a custom editor template - this is the preferable way, as thus you have a greater control over every control. Here is a demo that demonstrates how to define a custom editor template.
2. Wire the edit event of the widget and modify the widget manually:

   function edit(e) {
     var container = e.container;
     var startWidget = container.find("[data-role=datetimepicker]").filter("[name=start]").data("kendoDateTimePicker");
   
     startWidget.setOptions({
       format: "dd MMM yyyy hh:mm tt"
     });
   }

Note that you will need to define a custom date validation rule, as the defined format cannot be parsed by default by kendo.parseDate function. To do this you will need to define a validation object of the Model:

start: { from: "Start", validation: {
  date: function(input) {
    if (input.is("[name=start]")) {
       return !!kendo.parseDate(input.val(), "dd MMM yyyy hh:mm tt");
    }
    return true;
  }
}},

Best regards,
Georgi Krustev
Telerik

 

 

[Lucas]

Thanks Georgi, I used option 2 which worked perfectly.  You're a star!