DateInput Width

2 posts, 1 answers
  1. Tye
    Tye avatar
    18 posts
    Member since:
    Feb 2008

    Posted 05 Feb 2010 Link to this post

    I've searched the forums and tried a few of the suggestions to fix the issue I'm having, but I'm not having any luck. I need for the RadDatePicker to look like a LinkButton, where it's just the Date (January 1, 2010) underlined and when clicked, shows the RadCalendar. I have that part working thanks to another forum post, but the width of the RadDatePicker is causing problems. The goal is to have something like:

    January 1, 2010 to February 1, 2010

    Both dates are RadDatePickers. However, I can't find a way to automatically set the width of the RadDatePicker, so it ends up looking like:

    January 1, 2010                  to February 1, 2010

    Hard-coding the width wouldn't seem to be a practical solution due to localization concerns. Any ideas? I've created a sample page that demonstrates the problem:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
     
    <style type="text/css" media="all">
    .RadInput_Default .riTextBox     
    {       
       border: 0px solid orange !important;  /*changing the border to 1px will show all the extra whitespace/padding*/
       background: none transparent !important;    
       text-decoration: underline !important;
    }
    </style>
    </head>
    <body style="background-color: #cdcdcd">
        <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

    <telerik:RadDatePicker id="RadDatePicker1" runat="server" Skin="Default" SelectedDate="2009-04-06">
    <DateInput ID="DateInput1" runat="server" onclick="ToggleFirstPopup()" DateFormat="MMMM d, yyyy" />         
    <DatePopupButton Visible="False" />    
    </telerik:RadDatePicker>
    &nbsp;<asp:Label runat="server" ID="lblTo" Text="To"></asp:Label>&nbsp;

    <telerik:RadDatePicker id="RadDatePicker2" runat="server" Skin="Default" SelectedDate="2009-04-06">
    <DateInput ID="DateInput2" runat="server" onclick="ToggleSecondPopup()" DateFormat="MMMM d, yyyy" />         
    <DatePopupButton Visible="False" />    
    </telerik:RadDatePicker>
    <script type="text/javascript">
    function ToggleFirstPopup()
    {
    $find("<%= RadDatePicker1.ClientID %>").showPopup();
    }

    function ToggleSecondPopup()
    {
    $find("<%= RadDatePicker2.ClientID %>").showPopup();
    }

    </script>
    </form>
    </body>

    </html>

    Thanks,

    Tye
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 10 Feb 2010 Link to this post

    Hello Tye,

    You want to make a textbox resize automatically according to its content, which is impossible.

    I suggest you to use RadDatePickers with hidden textboxes and popup buttons, and display their values in separate controls - asp:Labels or asp:LinkButtons. Here is a similar demo:

    http://www.telerik.com/community/code-library/aspnet-ajax/calendar/how-to-use-raddatetimepicker-without-a-textbox-and-popup-buttons.aspx

    Use the second example ("Hide the TextBox and Popup Buttons") and place some text control next to each picker on your page. Subscribe to each picker's DateInput ValueChanged client event and use the handler to pass the hidden textbox' value to the text control:

    <telerik:RadDateTimePicker>
        <DateInput ClientEvents-OnValueChanged="passTextValue" />
    </telerik:RadDateTimePicker><asp:Label ID="Label1" runat="server" />

    Javascript:


    function passTextValue(sender, args)
    {
        window.setTimeout(function(){$get("Label1").innerHTML = sender.get_textBoxValue();}, 1);
    }


    Best wishes,
    Dimo
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
Back to Top