kendoDateTimePicker mask and auto format?

[CHRISTOPHER]

The new dateInput functionality added to the kendoDateTimePicker only deals with format.  It does provide true mask behavior similar to the MaskedTextBox control.

I want our users to be able to type 03012023 and the mask would convert it to 03/03/2023 automatically.

Is there any way to enable/incorporate this modern UI behavior into the kendoDateTimePicker?  The current implementation generating a lot of complaints from users.

[CHRISTOPHER]

  
      (function ($) {
        var kendo = window.kendo,
            ui = kendo.ui,
            Widget = ui.Widget,
            proxy = $.proxy,
            CHANGE = "change",
            PROGRESS = "progress",
            ERROR = "error",
            NS = ".generalInfo";

        var MaskedDatePicker = Widget.extend({
          init: function (element, options) {
            var that = this;
            Widget.fn.init.call(this, element, options);

            $(element).kendoMaskedTextBox(
                { 
                  mask: "00/00/y000",
                  rules: {
                    "y": /[1234]/
                  },
                  change: function()
                  {
                        try
                        {
                            if(_utility.isNullOrUndefined(kendo.parseDate(this.value(), _environment.DateFormat)))
                            {
                                this.value('');
                                that.element.focus();
                                this.select();
                            }
        
                        }
                        catch { }
                  }
                })
            .kendoDatePicker({
              format:  'MM/dd/yyyy'
            })
            .closest(".k-datepicker")
            .add(element)
            .removeClass("k-textbox");

            that.element.data("kendoDatePicker").bind("change", function() {
              that.trigger(CHANGE);
            });
          },
          enable: function(isEnabled)
          {
              this.element.data("kendoDatePicker").enable(isEnabled);
          },
          options: {
            name: "MaskedDatePicker",
            dateOptions: {}
          },
          events: [
            CHANGE
          ],
          destroy: function () {
            var that = this;
            Widget.fn.destroy.call(that);

            kendo.destroy(that.element);
          },
          value: function(value) {
            var datepicker = this.element.data("kendoDatePicker");
                
            if (value === undefined) {
              return datepicker.value();
            }

            datepicker.value(value);
          }
        });

        ui.plugin(MaskedDatePicker);

      })(window.kendo.jQuery);
 

[Neli]

Thank you for sharing your solution to the issue with the community. I am sure it will be heplful to the other users in the forum.

Regards,

Neli