How to set date format for event editor window

3 posts, 1 answers
  1. Lucas
    Lucas avatar
    2 posts
    Member since:
    Feb 2012

    Posted 09 Nov 2014 Link to this post


    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.

  2. Answer
    Georgi Krustev
    Georgi Krustev avatar
    3747 posts

    Posted 12 Nov 2014 Link to this post

    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");
          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 ("[name=start]")) {
           return !!kendo.parseDate(input.val(), "dd MMM yyyy hh:mm tt");
        return true;

    Best regards,
    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Lucas
    Lucas avatar
    2 posts
    Member since:
    Feb 2012

    Posted 13 Nov 2014 in reply to Georgi Krustev Link to this post

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