Changing Style/Border of DateInput

[gary]

Hi,

I am trying to change the border and background DateInput control. I would like to change the border to red with yellow background, and the triangle with ! in middle if possible or something to that affect. I tried a Custom Validator but with no luck. I would settle for a red border around the Data Input text box.

I have tried every which way; but to no success..Can this be done? If so, any suggestions?

Thanks in advance,
Gary

telerik:RadDatePicker ID="datepicker" runat="server"  ClientEvents-OnDateSelected="DateValidator"
        MaxDate="2100-12-31" MinDate="1900-01-01"
        Culture="English (United States)" SelectedDate="2011-03-01" >

    <Calendar runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" FastNavigationStep="12" ></Calendar>
    <DatePopupButton ImageUrl="" HoverImageUrl="" CssClass=""></DatePopupButton>

    <DateInput ID="DI" runat="server" CausesValidation="true" DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy"
        LabelCssClass="" Width="" SelectedDate="2011-03-01"   >
        <ClientEvents OnValueChanged="ValueChanged"/>
     </DateInput>

  </telerik:RadDatePicker>
</form>
</body>
</html>

<telerik:RadScriptBlock  ID="SOSRadScriptBlock" runat="server">
    <script type='text/javascript'>

        function ValueChanged(sender, args) {

            var dtv = $find(sender.controltovalidate).get_dateInput();
            var temp = args.Value.trim();
            if (temp != " " && !!temp) {
                args.IsValid = true;
            } else {
                //date input value is either null or has a space
                dtv._invalid = true;

                 //Below is the last approach I tried to change the style
                dtv.get_styles().InvalidStyle[0] += "background-color: lemonchiffon;";
                dtv.updateCssClass();
                args.IsValid = false;

            }
    </script>
</telerik:RadScriptBlock>

[Shinu]

Hello Gray,

There is inbuilt checking for the invalid date, which considers the space also, so need to go for an explicit checking like you did.

You can set the desired background and border by setting the properties InvalidStyle-BackColor and InvalidStyle-BorderColor from the aspx itself.
ASPX:

<telerik:RadDatePicker ID="datepicker" runat="server" MaxDate="2100-12-31" MinDate="1900-01-01"
            Culture="English (United States)" SelectedDate="2011-03-01">
. . . . . . . . .  .
  <DateInput ID="DI" runat="server". . . . . InvalidStyle-BorderColor="Aqua" InvalidStyle-BackColor="Yellow">
   </DateInput>
</telerik:RadDatePicker>

And for showing the Invalid icon to the center, try overriding the default CSS like below.
CSS:

<style type="text/css">
    .riError
    {
        background-position: 50px -298px !important;
    }
</style>

Thanks,
Shinu.

[gary]

Hi Shinu,

Thanks for the quick response. I tried your suggestionin my test program and it works great; however, when I plug the exact code that works in the test program into my real code, it does not behave the same. When an invalid date is entered, I can see a small amount of yellow appearing behind the dateinput instrad of inside. Also, the border never changes color. The only difference I can see is that dateinput is embedded in a form; while the real program is a dynamically generated control not in a form.

Also, how does th einbuilt checking handle null or empty string? That is also a possibility. I tried an empty string in my test code and it acted as if it was a good date by not displaying the InvalidS Style.

Thanks again....

[Maria Ilieva]

Hello gary,

It is rather strange the proposed suggestion works correctly on the test environment and does not in the real one. The difference you mentioned should not give any effect on the project results. Could you please open a regular support ticket and send us sample runnable application which replicates the described issue. Thus we will be able to test it locally and advise you further.

Best wishes,
Maria Ilieva
the Telerik team