[Solved] get_rangeSelectionStartDate returns a Date object but FormatDate fails on it

[Mircea]

I don't know what I am doing wrong but I basically display a RadCalendar for a range selection:

<telerik:RadCalendar runat="server" ID="RadCalendar1" RangeSelectionMode="ConsecutiveClicks"
                EnableViewSelector="True" EnableKeyboardNavigation="True" SelectedDate="" Skin="Metro">
                <ClientEvents OnDateClick="onDateClick"></ClientEvents>
                <WeekendDayStyle CssClass="rcWeekend" />
                <CalendarTableStyle CssClass="rcMainTable" />
                <OtherMonthDayStyle CssClass="rcOtherMonth" />
                <OutOfRangeDayStyle CssClass="rcOutOfRange" />
                <DisabledDayStyle CssClass="rcDisabled" />
                <SelectedDayStyle CssClass="rcSelected" />
                <DayOverStyle CssClass="rcHover" />
                <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Metro" />
                <ViewSelectorStyle CssClass="rcViewSel" />
 </telerik:RadCalendar>

the following code executes when onDateClick handler executes

var rangeText = $("#RangeText");
var rc = $find("RadCalendar1");
var startDate = rc.get_rangeSelectionStartDate();
var datepattern = 'MM/dd/yyyy';
rangeText[0].value = rc.DateTimeFormatInfo.FormatDate(startDate, datepattern);

The problem is that the value of the textbox is set to: "0undefined/0undefined/undefined" (returned by the FormatDate() method).
If I take a look at the startDate value in the watch window it says: "Thu Jun 13 00:00:00 EDT 2013"
However when I expand the startDate instance there's a [prototype] child with a value of "Invalid Date"
Is this normal behavior? Why isn't the formatting working?

Thank you.

[Vasil]

Hi Mircea,

The problem is that Telerik.Web.UI.Calendar.DateTimeFormatInfo.FormatDate works with Date Tripplet: array with 3 numbers for year, month and day. It does not work with the Date objects.

You can create such triplet, and pass it to the FormatDate:

var newDateTriplet = new Array();
newDateTriplet.push(startDate.getFullYear());
newDateTriplet.push(startDate.getMonth() + 1);
newDateTriplet.push(startDate.getDate());
rangeText[0].value = rc.DateTimeFormatInfo.FormatDate(newDateTriplet, datepattern);

I hope this helps.

Regards,
Vasil
Telerik

[Mircea]

Ok, then you guys should correct your documentation a bit just to avoid any confusion.
The column saying what the return type is, specifies Date but the description says it should return a triplet.
Not an expert JavaScript programmer as you can tell but I figured it out looking at the FormatDate() source code that it only knows to handle those triplets. I ended up writing something similar with what you sent me.

var rawStartDate = rc.get_rangeSelectionStartDate();
var rawEndDate = rc.get_rangeSelectionEndDate();
// translate Date into a DateTriplet [2013,10,29]
var startDate = rawStartDate ? [rawStartDate.getFullYear(), rawStartDate.getMonth() + 1, rawStartDate.getDate()] : '';
var endDate = rawEndDate ? [rawEndDate.getFullYear(), rawEndDate.getMonth() + 1, rawEndDate.getDate()] : '';

At least your code confirms that how I did it is one of the correct ways of doing it.

Thank you Vasil.

[Vasil]

Hi Mircea,

Thank you for your feedback. We will update the documentation and the prototype commends and summaries.

To avoid confusion about the DateTimeFormatInfo in future reading of this thread I should share some more information:

It seems that originally back in 2008, the Input control used DateTimeFormatInfo
And later the Calendar had it's own DateTimeFormatInfo that was based on the input's that was done for parsing only dates, to be lightweight. It was changed to accept triplets, because of the internal functionality of the Calendar and to be a slightly faster, however the documentation was not properly updated at this point.
The classes have the same name, but in fact they are different according to the needs of the controls and some performance optimizations:
Telerik.Web.UI.DateParsing.DateTimeFormatInfo and
Telerik.Web.UI.Calendar.DateTimeFormatInfo

Regards,
Vasil
Telerik