change RadTextbox(Telerik textbox) and RadDatePicker(Telerik DatePicker) background color using jquery or Javascript

Question

I am using telerik controls in my application. I have to change background colors of RadTextbox and RadDatePicker

how to change RadTextbox(Telerik textbox) and RadDatePicker(Telerik DatePicker) background color using jquery or Javascript?

Answer 1

I am getting solution as below:

ASPX page Code

 <asp:ButtonID="Button"runat="server"  OnClientClick="click1();return false;"
          Text="click"/> 
      <telerik:RadDatePickerID="RadDatePicker1"runat="server"> 
          <DateInput> 
          </DateInput> 
      </telerik:RadDatePicker> 
      <telerik:RadTextBoxID="RadTextBox1"runat="server"> 
      </telerik:RadTextBox>

Javascript

<script type="text/javascript"> 
function click1() 
 { 
     varpicker = $find("<%= RadDatePicker1.ClientID %>"); 
     vartextbox = $find("<%= RadTextBox1.ClientID %>"); 
     textbox.get_styles().EnabledStyle[0] += "background-color: red;"; 
     textbox.updateCssClass(); 
     picker.get_dateInput()._textBoxElement.style.backgroundColor = "yellow"; 
 } 
</script>

By that change BG color of telerik control

Answer 2

I needed to change the CSS class of a RadDatePicker dynamically and came across this posting.

http://www.telerik.com/community/forums/aspnet/calendar/how-to-change-css-class-in-javascript.aspx

function changeClass() 
{ 
    var pickerWrapper = $get("<%= RadDatePicker11.ClientID %>_wrapper"); 
    pickerWrapper.className += " myClass"; 
} 

I think it's better as you are changing the class of the top level element of the RadDatePicker instead of delving into the DatePicker component to change the class of the text field.

This is the code I ended up using for my purposes.

I'm using WebBlue as my telerik style.

function setDatePickerRequired(o, required)
{

    if (required)
    {
        $get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue RequiredDate";
    }
    else
    {
        $get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue";
    }

}

my css

div.RadPicker_WebBlue.RequiredDate input.riTextBox
{
    background-image: url(images/required-tick.gif);
    background-position: right top;
    background-repeat: no-repeat;
}

Rich