Edit this page

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.

Example
    <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

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy