New to Kendo UI for jQuery? Download free 30-day trial

Format Dates in DateTimePickers in Scheduler Edit Popup


Product Progress® Kendo UI® Scheduler for jQuery Progress® Kendo UI® DateTimePicker for jQuery


How can I set a custom format to the DateTimePickers displayed in Scheduler edit popup?


In order to change the date format in the edit popup you can:

  1. Handle the edit event of the widget.
  2. In the edit event handler get a reference to the start and end DateTimePickers.
  3. Use the setOptions method to set a new format.
  4. Change the format set in 'data-format' attribute in order for the validation to know the correct format.
    <div id="scheduler"></div>
      $(document).ready( function () {
         // custom validation rule    
        $.extend(true, kendo.ui.validator, {
          rules: {  
            dateValidation: function (input) { console.log('validate date')
              if ("[name=start]") && input.val()) {
                // return true or false depending on the validity of the two dates
                return true 
              return true;
            dateValidation:"Date validation message!"

        date: new Date("2013/6/6"),
        views: [ "day", "month" ],
        dataSource: [
            id: 1,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Interview"
        edit: function(e) {
          var container = e.container
          var startInput = $(e.container).find('.k-datetimepicker [name="start"]')
          var startDateTimePicker = $(startInput).data('kendoDateTimePicker')
            format: "dd MMM yyyy hh:mm tt"

          var endInput = $(e.container).find('.k-datetimepicker [name="end"]')
          var endDateTimePicker = $(endInput).data('kendoDateTimePicker')
            format: "dd MMM yyyy hh:mm tt"

          $(container).find("[data-role=datetimepicker]").each(function() {    
            // this will be required for the validation to know the correct format
            $(this).attr("data-format",  "dd MMM yyyy hh:mm tt") 

See Also

In this article