Rounded corners for RadDateInput, how ?

3 posts, 1 answers
  1. aykut
    aykut avatar
    67 posts
    Member since:
    Oct 2007

    Posted 10 Dec 2012 Link to this post

    dear friends,
    I tried blow code but rounded corners does not work. if I use Skin="" parameter it works but this time picker button disappers and "Open the calendar popup" text appears (as expected)
    is there a solution ?

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="true" />
    <div id="jjj">
        <telerik:RadTextBox ID="RadTextBox1" runat="server" Skin=""></telerik:RadTextBox>
        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Calendar-CultureInfo="en-US">

  2. Answer
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2012 Link to this post

    Hi Aykut,

    Try the following code snippet to apply rounded corners to the DateInput of RadDatePicker.

    protected void Page_PreRenderComplete(object sender, EventArgs e)
        RadDatePicker1.DateInput.EnabledStyle.CssClass = String.Empty;
        RadDatePicker1.DateInput.HoveredStyle.CssClass = String.Empty;
        RadDatePicker1.DateInput.FocusedStyle.CssClass = String.Empty;
        RadDatePicker1.DateInput.InvalidStyle.CssClass = String.Empty;

    Please take a look into this for more information.


  3. Tom
    Tom avatar
    3 posts
    Member since:
    May 2012

    Posted 09 Apr 2013 Link to this post

    Hey Aykut,

    Sorry to be wading into this a bit late but I had the same issue and, unfortunately, for whatever reason Princy's suggestion didn't seem to work for me but I did discover a much easier workaround (IMHO) which is to add the following to your code at design time:

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="01/01/1880 00:00:00" >
        <DateInput runat="server" EnabledStyle-CssClass="rfdInput rfdRoundedCorners" HoveredStyle-CssClass="rfdInput rfdRoundedCorners" FocusedStyle-CssClass="rfdInput rfdRoundedCorners" InvalidStyle-CssClass="rfdInput rfdRoundedCorners" />

    It's the <DateInput /> stuff that worked for me and it appears to work cross-browser too and ensure that the calendar popup button remained instead of the text appearing.

Back to Top