This is a migrated thread and some comments may be shown as answers.

Set date input field class on client side

2 Answers 16 Views
DateInput
This is a migrated thread and some comments may be shown as answers.
Matt Smith
Top achievements
Rank 1
Matt Smith asked on 22 Mar 2021, 10:48 PM

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?

2 Answers, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 25 Mar 2021, 01:09 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Matt Smith
Top achievements
Rank 1
answered on 25 Mar 2021, 08:05 PM

Donco,

Thanks for the reply. Neat trick. Works well.

Cheers,

Matt.

Tags
DateInput
Asked by
Matt Smith
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Matt Smith
Top achievements
Rank 1
Share this question
or