Changing Style/Border of DateInput

4 posts, 0 answers
  1. gary
    gary avatar
    14 posts
    Member since:
    Aug 2010

    Posted 02 Mar 2011 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Mar 2011 Link to this post

    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.
  3. gary
    gary avatar
    14 posts
    Member since:
    Aug 2010

    Posted 03 Mar 2011 Link to this post

    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....
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 09 Mar 2011 Link to this post

    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!
Back to Top