Set date input field class on client side

[Matt Smith]

Hi, I am trying to provide visual indicators within the date input field of the data picker of possible errors with a date selection. I am trying to do this on keyboard input or the date picker date selection.

If the date selected or entered is before a date on the page, I want to show the error field in an error colour as that date could create program with other data being displayed. It is not a fatal error more a visual error. However, I do not see how this can be done because it appears that the date picker control is caching the initial classes and if you mouse over, that initial class over writes what is there and the visual error indication is lost. Alternately, if I try to set the inline styles with JQuery, they do not stick.

Basically, the concept is simple, put in a date before a displayed date, highlight the background of the input field. If the field is highlighted and you change the date to equal or be after the displayed, it goes back to the normal rendered state.

Am I basically SOL here?

[Doncho]

Hi Matt,

Since the inline styles and the class names are dynamically modified by the internal logic of the DatePicker, you can try using a wrapper element for applying the custom styles.

For example:

<style>
    .stylingWrapper .RadPicker .RadInput .riTextBox {
        background-color: red;
    }
</style>

<div class="dummyWrapper">
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <ClientEvents OnDateSelected="OnDateSelected" />
    </telerik:RadDatePicker>
</div>

<script>
    function OnDateSelected(sender, args) {
        $wrapper = $(sender.get_element()).closest(".dummyWrapper");

        if (args.get_newDate().getTime() < Date.now()) {
            if (!$wrapper.hasClass("stylingWrapper"))
                $wrapper.addClass("stylingWrapper");
        }
        else {
            if ($wrapper.hasClass("stylingWrapper"))
                $wrapper.removeClass("stylingWrapper");
        }
    }
</script>

You can try the sample above by selecting dates before and after the current date.

Please let me know if that would work for you.

Kind regards,
Doncho
Progress Telerik

[Matt Smith]

Donco,

Thanks for the reply. Neat trick. Works well.

Cheers,

Matt.