RadDatePicker: Show calendar always/permanently

[Lukas]

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

[Dimo]

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

[Lukas]

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

[Princy]

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.

[Lukas]

@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>