This is a migrated thread and some comments may be shown as answers.
Changing Style/Border of DateInput
3 Answers 77 Views
This is a migrated thread and some comments may be shown as answers.
gary
Top achievements
Rank 1
gary asked on 02 Mar 2011, 11:40 PM
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>

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 03 Mar 2011, 06:44 AM
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.
0
gary
Top achievements
Rank 1
answered on 03 Mar 2011, 03:50 PM
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....
0
Maria Ilieva
Telerik team
answered on 09 Mar 2011, 09:56 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Tags
Input
Asked by
gary
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
gary
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or