Create Date Masking

The following example demonstrates how to create a date-masking functionality in the DatePicker by using the Kendo UI MaskedTextBox.

To achieve this behavior:

• Initialize the MaskedTextBox first.
• Match the mask of the MaskedTextBox and the format of the DatePicker.

Important

This approach is not officially supported and might lead to undesired side-effects. As of the Kendo UI R2 2017 release, the DatePicker supports the dateInput property which provides a built-in mask.

    <input id="datepicker1" />
    <input id="datepicker2" />
    <script>
      $(function() {
        $("#datepicker1").kendoDatePicker({
          parseFormats: ["MMddyyyy"]
        });

        //combine MaskedTextBox with DatePicker (officially unsupported)
        var datepicker2 = $("#datepicker2");

        datepicker2.kendoMaskedTextBox({
          mask: "00/00/0000"
        });

        datepicker2.kendoDatePicker({
            format: "MM/dd/yyyy"
        });

        datepicker2.closest(".k-datepicker")
        .add(datepicker2)
        .removeClass("k-textbox");
      });
    </script>

See Also

• DatePicker JavaScript API Reference
• How to Globally Modify Default Options
• How to Hide the Default Button
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width
• How to Set the First Weekday

For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.