RadDatePicker: Show calendar always/permanently

5 posts, 1 answers
  1. Lukas
    Lukas avatar
    42 posts
    Member since:
    Feb 2009

    Posted 30 Sep 2010 Link to this post

    Hi there,

    is there a way to make the DatePicker show its calendar always?

    I tried to show the calendar on document load by using "DatePicker.showPopup()" and keep it visible by using:

    <script type="text/javascript">
        function OnPopupClosing(sender, args)
        {
            eventArgs.set_cancel(true);
        }
    </script>

    But theOnPopupClosing-Event is only fired if the Popup closes after a date was selected.
    If the users just clicks outside the control, the Popup closes without firing the event.

    So is there a simple way to get a DatePicker show its calendar permanently or some workaround?

    I also tried using a DatePicker and a additional Calendar and sync the input between the controls, but this is quit uncomfortable an error-prone

    Any help is appreciated

    btw
    There was a post about this topic a few months ago, but there was no helpful answer to this:
    http://www.telerik.com/community/forums/aspnet-ajax/calendar/raddatepicker-can-raddatepicker-show-the-calendar-always.aspx

    Lukas
  2.
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 30 Sep 2010 Link to this post

    Hello Lukas,

    You will have to use a combination of RadDateInput and a RadCalendar and sync the two by using the controls' client APIs.

    http://www.telerik.com/help/aspnet-ajax/calendar_clientsideradcalendar.html
    http://www.telerik.com/help/aspnet-ajax/calendar_clientsideraddatepicker.html

    However, if you don't need time information, you can use only a RadCalendar - there is no need for a RadDateInput textbox in this case. Or you can use a RadCalendar for the date and RadTimePicker for the time.

    Sincerely yours,
    Dimo
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  5. Lukas
    Lukas avatar
    42 posts
    Member since:
    Feb 2009

    Posted 30 Sep 2010 Link to this post

    Hello Dimo,

    thanks for the quick reply.

    If there is not way to make the calendar popup stay, I will use the two controls and sync the input.

    Lukas
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Sep 2010 Link to this post

    Hi Lukas,


    I hope the following code snippet will help you.

    aspx:
    <telerik:RadDateInput ID="RadDateInput1" runat="server">
    </telerik:RadDateInput>
    <br />
    <telerik:RadCalendar EnableMultiSelect="false" ShowRowHeaders="false" ID="RadCalendar3" runat="server">
        <ClientEvents OnDateSelected="OnDateSelected" />
     </telerik:RadCalendar>

    client code:
    <script type="text/javascript">
        function OnDateSelected(sender, args) {
            var dateInput = $find('<%=RadDateInput1.ClientID %>');
            var slectedDate = args.get_renderDay().get_date();
            var myDate = new Date();
            myDate.setYear(slectedDate[0]);
            myDate.setMonth(slectedDate[1]-1);
            myDate.setDate(slectedDate[2]);
            dateInput.set_selectedDate(myDate);
        }
    </script>



    Thanks,
    Princy.
  8.
  9. Lukas
    Lukas avatar
    42 posts
    Member since:
    Feb 2009

    Posted 30 Sep 2010 Link to this post

    @Princy
    Thanks for the snippets.
    That was exactly the way I tried at first.

    Setting the DatePicker to the selected date from the calendar worked, but the same procedure vice versa gave me a lot of errors.

    But it turned out, that I just got confused with the DatePicker.set_selectedDate()-Method taking a Date as parameter while the Calendar.selectDate()-Method takes a int[] with [year,month,day] as parameter.

    So for anyone else running across this problem I attached my code

    Javascript:
    function setCalenderFromPicker(sender)
    {
        if (sender)
        {
            var dat = sender.get_selectedDate();
            if (dat)
            {
                var dateTriplet = [dat.getFullYear(), dat.getMonth() + 1, dat.getDate()];
     
                if (sender.get_id() == '<%= rdp_VonDatum.ClientID %>')
                {
                    calendar = $find("<%= rcal_VonDatum.ClientID %>");
                    calendar.selectDate(dateTriplet, true);
                }
                else
                {
                    calendar = $find("<%= rcal_BisDatum.ClientID %>");
                    calendar.selectDate(dateTriplet, true);
                }
            }
        }
    }
     
    function setPickerFromCalender(sender)
    {
        if (sender)
        {
            var dat = sender.get_selectedDates()[0];
            if (dat)
            {
                dat = new Date(dat[0], dat[1] - 1, dat[2]);
                if (sender.get_id() == '<%= rcal_VonDatum.ClientID %>')
                {
                    picker = $find("<%= rdp_VonDatum.ClientID %>");
                    picker.set_selectedDate(dat);
                }
                else
                {
                    picker = $find("<%= rdp_BisDatum.ClientID %>");
                    picker.set_selectedDate(dat);
                }
            }
        }
    }

    MarkUp:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div style="width: 20%">
        <telerik:RadDatePicker ID="rdp_VonDatum" runat="server" ClientEvents-OnDateSelected="setCalenderFromPicker"
            Width="100%" DatePopupButton-Visible="false" />
        <telerik:RadCalendar ID="rcal_VonDatum" runat="server" EnableMultiSelect="false">
            <ClientEvents OnDateSelected="setPickerFromCalender" />
        </telerik:RadCalendar>
        <telerik:RadDatePicker ID="rdp_BisDatum" runat="server" ClientEvents-OnDateSelected="setCalenderFromPicker"
            Width="100%" DatePopupButton-Visible="false" />
        <telerik:RadCalendar ID="rcal_BisDatum" runat="server" EnableMultiSelect="false"  >
            <ClientEvents OnDateSelected="setPickerFromCalender" />
        </telerik:RadCalendar>
    </div>
Back to Top