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

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.


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" />
      $(function() {
          parseFormats: ["MMddyyyy"]

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

          mask: "00/00/0000"

            format: "MM/dd/yyyy"


See Also

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

In this article
Not finding the help you need? Improve this article