Unskinned Date Picker Textbox

[Jerry]

I really like the date picker control, but the web site that I'm putting it on uses all standard html input textboxes and buttons. When I add this control with the rest of the controls, my form looks like it is wearing a suit with sneakers.  The 2 styles just don't merge well.

Is there any simple way to set the date picker to look like a standard <input type="text" /> html control?

I have been through the skins, and can't find one that supports the look I need.

[Dimo]

Hi Jerry,

The simplest option is to override one of the embedded skins and explicitly set textbox styles, which match the standard textbox styles:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="StandardTextBox" />

CSS

.StandardTextBox .RadInput .riTextBox
{
    border:2px inset #fff;
    border-bottom:1px solid #d4d0c8;
    padding:1px;
}


However, the above approach will not work well for different Windows versions and themes, which use different default styles for textboxes.


Another option is to remove the textbox CSS classes, so that the skin styles are not applied. You can see how to do this here:

http://www.telerik.com/community/forums/aspnet-ajax/form-decorator/raddatepicker-rounded-corners.aspx


Third option is to create a custom RadInput skin with no textbox styles. However, in this case you will also need a custom Calendar skin with the same name.

Still another option is to start using RadFormDecorator, which styles all textboxes on the page, so that they have a consistent look with the RadTextBoxes, RadDatePicker textboxes, etc.


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jerry]

Hi Dimo, thanks so much for the quick response.

I used the method you suggested to remove the css class.

One more question, why does the cssclass property need to be set on PreRender.
I noticed through trial and error that you can not apply the property at the page load event.

thanks

[Dimo]

Hello Jerry,

The CssClass must be cleared in Page_PreRenderComplete, because the control sets it in PreRender. If you clear it before that, it will be restored.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jerry]

Thanks Dimo

1 final question.

I'm creating this date picker tool dynamically in a asp.net server control.

there is no PreRenderComplete event to override within the control.

Is there another override event within the server control that I should place these commands.

thanks

[Dimo]

Hello Jerry,

Page_PreRenderComplete is a page method, not a control method. You can still use it, no matter how the control is created. I am afraid there is no other suitable event, which can be used to remove the CSS class.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.