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.