datetimepicker mask

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 23 Jun 2017 11:15 by ADMIN

Gal

Created on: 31 Aug 2015 18:09

Category: MaskedTextBox

Type: Feature Request

datetimepicker mask

Date/DateTime/Time pickers need to have a mask automaticly for the date format entered currently users need to type the "/" instead of a mask "__/__/____"  like in telerik ajax. 
I know there is this link 

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/datepicker/how-to/masked-date-picker-grid

With a solution but this is a workaround and not a built in solution supported by telerik.

3 comments

ADMIN

Pavlina

Posted on: 23 Jun 2017 11:15

Shipped: We implemented DateInput widget: http://demos.telerik.com/kendo-ui/dateinput/index which can be integrated with:
 - DatePickers - http://demos.telerik.com/kendo-ui/datepicker/index
 - DateTimePickers - http://demos.telerik.com/kendo-ui/datetimepicker/index
 - TimePickers - http://demos.telerik.com/kendo-ui/timepicker/index

More information about DateInput component is available in the article below:
http://docs.telerik.com/kendo-ui/controls/editors/dateinput/overview

Thiago

Posted on: 03 May 2016 14:10

I agree this would be very useful for the DateTimePicker, DatePicker and TimePicker controls.

Gal

Posted on: 19 Sep 2015 17:35

I added thi functionality and fixed the demo in the link so it workes in a kendo grid now. 
This works for kendoDatePicker and kendoDateTimePicker. 

(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget;
        CHANGE = "change",
        BLUR = "blur",

    [ { type: 'DateTime', defaultMask: '00/00/0000 00:00', container: '.k-datetimepicker' },
      { type: 'Date',     defaultMask: '00/00/0000',       container: '.k-datepicker'     }]
    .forEach(function(x) {

        var baseName = 'kendo' + x.type + 'Picker';
        var newName = "Masked" + x.type + "Picker";
        var _basePlugin = $.fn[baseName];
        var maskedPicker = Widget.extend({
            init: function (element, options) {
                var that = this;
                Widget.fn.init.call(this, element, options);

                $(element).kendoMaskedTextBox({ mask: options.mask || x.defaultMask });
                _basePlugin.call($(element), options)
                    .closest(x.container)
                    .add(element)
                    .removeClass("k-textbox");

                that.element.on("blur", function () {
                    that.trigger("change");
                });
            },
            options: {
                name: newName,
                dateOptions: {}
            },
            destroy: function () {
                var that = this;
                Widget.fn.destroy.call(that);

                kendo.destroy(that.element);
            },
            value: function (value) {
                var datepicker = this.element.data(baseName);

                if (value === undefined) {
                    return datepicker.value();
                }
                datepicker.value(value);
            },
            //Export the events the control can fire
            events: [CHANGE]
        });
        ui.plugin(maskedPicker);
        $.fn[baseName] = $.fn['kendo' + newName];
    });

})(jQuery);