This is a migrated thread and some comments may be shown as answers.

RadDatePicker: Show calendar always/permanently

4 Answers 266 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Lukas
Top achievements
Rank 2
Lukas asked on 30 Sep 2010, 02:41 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 30 Sep 2010, 03:05 PM
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
0
Lukas
Top achievements
Rank 2
answered on 30 Sep 2010, 03:11 PM
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
0
Princy
Top achievements
Rank 2
answered on 30 Sep 2010, 03:13 PM
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.
0
Lukas
Top achievements
Rank 2
answered on 30 Sep 2010, 03:59 PM
@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>
Tags
Calendar
Asked by
Lukas
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Lukas
Top achievements
Rank 2
Princy
Top achievements
Rank 2
Share this question
or