Make DatePicker ReadOnly Without Fuzzy

2 posts, 1 answers
  1. Velma
    Velma avatar
    32 posts
    Member since:
    Jul 2011

    Posted 05 Jan 2012 Link to this post

    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)

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

  2. Answer
    Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 06 Jan 2012 Link to this post


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

    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top