Today button in Calender

[James Shelton Agar]

Hi, I am trying to have a "today" button in datepicker (and maybe in radcalnder as well)

how would I archive this (at moment, to go to today, need to select month-today) 

[Shinu]

Hello James,

I accomplished the same by placing button in FooterTemplate of Calendar in datepicker, then set the date in the click handler of button.

ASPX:

    <telerik:RadDatePicker ID="RadDatePicker10" runat="server" Width="140px">
        <Calendar runat="server">
            <FooterTemplate>
                <div style="width: 100%; text-align: center; background-color: Gray;">
                    <input id="Button1" type="button" value="Today" onclick="GoToToday()" />
                </div>
            </FooterTemplate>
        </Calendar>
    </telerik:RadDatePicker>

JavaScript:

    function GoToToday() {
        var datepicker = $find("<%=RadDatePicker10.ClientID%>");
        var dt = new Date();
        datepicker.set_selectedDate(dt);
    }

-Shinu.

[James Shelton Agar]

works great! thank you for the tip

[Michael Veltre]

How can I accomplish the same function server side?

[Eyup]

Hi Michael,

You can use the SpecialDays collection to achieve this requirement:
http://demos.telerik.com/aspnet-ajax/calendar/examples/functionality/today/defaultcs.aspx

Hope this helps.

Regards,
Eyup
Telerik

 

 

[IT-Fjárvakur]

A small update

This solution does not work when RadDatePicker is bound in edittemplates in grid and such. Also, if you have multiple RadDatePickers (like date from and date to) you might end up with a huge switch/case or if/else if/else which is not really scalable.


My solution was to change the onClick function so it takes in a parameter.
This is somewhat of a "hack" but since there is only one popup calendar available when you open up your the datepicker, just select the first one. That leaves you with the RadCalender and you can set the date from there.

Btw - it's 2017. Telerik should add this function to calendar pick both server and client side.

<input id="Button1" type="button" value="Today" onclick="GoToToday(this)" />

function GoToToday(aButtonNode)
        {
            var _calenders = $(".RadCalendarPopupShadows");
            var _today = new Date();
            var todayTriplet = [_today.getFullYear(), _today.getMonth() + 1, _today.getDate()];
            $find(_calenders[0].childNodes[0].id).selectDate(todayTriplet, true);
        }