Make DatePicker ReadOnly Without Fuzzy

[Velma]

I made the following Javascript function which successfully makes the DatePicker  readonly (including no select from the calendar) without the grey fuzzy appearance. (I think it might be possible to do this with CSS, not sure, but we are in IE, where that doesn't work.) I don't know if this is the best approach, but it works fine. I think it's a common need, and I couldn't find it documented anywhere, so I'm posting it here in case others can use it. Function also supports making editable again.

function SetDatePickerReadOnly(picker, readOnly) {
    picker.set_enabled(!readOnly);  // disable the overall control if readOnly is true (or the converse)
    var input = picker.get_dateInput();  //retrieves the inner DateInput portion of the DatePicker
    input.enable(); // enable the input box only, leaving the calendar disabled (or the converse)
    input._textBoxElement.readOnly = readOnly;  //the inner reference to the input object; changes appearance to "ReadOnly" style and not editable
    // (or the converse)
}

Usage:

var dobPicker = $find("<%= DateOfBirthDatePicker.ClientID %>");
SetDatePickerReadOnly(dobPicker, true);

[Maria Ilieva]

Hi,


Thank you for sharing your approach with the community. I'm sure it will be helpful for the other users which need this functionality.


Greetings,
Maria Ilieva
the Telerik team