Calendar as customized Datapicker

3 posts, 0 answers
  1. Prabu
    Prabu avatar
    2 posts
    Member since:
    Nov 2015

    Posted 09 Dec 2015 Link to this post


     In our application we have already implemented leagcy calendar popup mechanism, now I'm planning to replace them with Rad Calendar. we have a combination of textbox followed by a calendar control to pick the dates and assign it to the textbox. I just want to replace my calendar with the Rad datapicker calendar and upon slecting the date it should assign to my existing textbox. I tried with some samples in this site by using Rad calendar control as Datapicker, but it is not showing as similar like a Rad datepicker calendar, (it doesn't show like a floating calendar). Please let me know in detail (I'm not that good at UI) on how to achieve this functionality. Thank you!


  2. Prabu
    Prabu avatar
    2 posts
    Member since:
    Nov 2015

    Posted 09 Dec 2015 Link to this post

    Hi, I got somemore help from this forum. By hidding the textbox in the datepicker control I could only display the calendar to picke the date. That issue is resolved, now the problem is the calendar control is either displaying far from my textbox control or in the next line. My code snippet is as below, could you please suggest some help on how to reduce the space between my textbox control and the radcalendar control.

    <style type="text/css">
    width:1px !important;
    border:0 !important;
    margin:0 !important;
    background:none transparent !important;
    visibility:hidden !important;
    .HiddenPicker td
    padding:0 !important;


    <td><cms:TextBox ID="testTextBox1" CssClass="inputTextMedium form_margin" runat="Server"
    <telerik:RadDateTimePicker ID="RadDatePicker1" runat="server" CssClass="HiddenPicker" Skin="Default" Width="1px" >
    <DateInput runat="server" CssClass="HiddenTextBox" />
    </telerik:RadDateTimePicker> </td>


  3. DevCraft R3 2016 release webinar banner
  4. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 14 Dec 2015 Link to this post

    Hello Prabu,

    In order to achieve the required rendering you can simply replace all the css you are adding with the following:

    <style type="text/css">
                   .HiddenTextBox {
                       display: none;

    Give this a try and let me know if it works for you.

    Maria Ilieva
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top