DatePicker Format Issue

[Jason Hilton]

I found an odd behavior from the DatePicker in version 2008.3.1314.35

If I use the date format MM/yyyy, no matter what month I pick it always sets the date to the current month.

So if I select May 2009, it sets it to 12/2009.  If I select March 2010, it sets it to 12/2010.  Now if I change the format to MM/DD/yyyy it works as expected.

Here is an example of one of my datepickers

<telerik:RadDatePicker ID="TextBoxMonthEndDate" runat="server" Calendar-ShowRowHeaders="false" Skin="Vista">
   <DatePopupButton ImageUrl="~/images/Calendar_scheduleHS.png" HoverImageUrl="~/images/Calendar_scheduleHS.png" />
   <DateInput DateFormat="MM/yyyy" runat="server" />
</telerik:RadDatePicker>

Has this been fixed in more recent versions?

[Jeremy Yoder]

I just installed the RAD controls as our company is looking to buy a good toolset. The first thing I did was try the DatePicker with a M/yyyy format and I found the same behavior.

We need to select a date from the popup calendar that results in a M/yyyy format or type type it manually. So under DateInput, I set DateFormat and DisplayDateFormat to M/yyyy. That's when I discovered the original post issue, and found that typing a date in that format doesn't work.

I don't know what support Telerik gives, but hopefully you can help so we decide if we should go with your product or not. Thanks.

[Martin]

Hello Guys,

You are correct that in this case the RadDatePicker control does not behave as expected. However this is not actually a bug. It is a specific of the parsing mechanism of the embedded RadDateInput control. Here is a small quote from the documentation article, describing its parsing logic:

"Incomplete dates are always evaluated taking the current date as a basis. For example, "January 2" means January 2 this year. If the current month is April, an entry of "10" is interpreted as April 10, this year."

In your case when the DateFormat property is set to "MM/yyyy" the date input ignores the selected day and tries to parse a string containing month and year values only. However the parsing logic tries to find a day value first and parses the month value as the day one. Then it parses correctly the rest of the string as the relevant year. Since the control can not find other string value to be parsed as a month, it applies the current month value instead. Hence the wrong date selection.

To go through this specific of the control logic you can use any of the following approaches:

• Wire the client-side OnValueChanging event and manually set the correct date:

<script type="text/javascript">
        function ValueChanging(sender, args)
        {
            if (sender.get_dateFormat() == "MM/yyyy")
            {
                var selectedDay = sender.get_owner().get_calendar().get_selectedDates()[0][2];
                var value = args.get_newValue();
                var monthPlace = sender.get_dateFormatInfo().DateSlots["Month"];
                if (monthPlace == 1)
                {
                    args.set_newValue(selectedDay + "/" + value);
                }
                else
                {
                    var monthAndYear = value.split("/");
                    args.set_newValue(monthAndYear[0] + "/" + selectedDay + "/" + monthAndYear[1]);
                }
            }
        }
    </script>

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <DateInput ID="DateInput1" DateFormat="MM/yyyy" runat="server"
            ClientEvents-OnValueChanging="ValueChanging" />
    </telerik:RadDatePicker>

• Since the the "MM/yyyy" format assumes that the day value is not so important you can set the DateFormat = "dd/MM/yyyy" and DisplayDateFormat = "MM/yyyy". In this case the selected date will be parsed correctly, but the date input will show the full date format when focused.

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jeremy Yoder]

The 2nd solution doesn't work for us as we don't want the day to be shown when the DatePicker gets the focus.

As for the 1st solution, the javascript code only works initially. Because later, if the DatePicker gets the focus and then loses it, the value reverts to the current month.

We really need the DatePicker to work with the format "MM/yyyy". Any other workaround ideas? Or better yet, can you simply make the control work with this format as expected?

[Martin]

Hello Jeremy Yoder,

As it is described in the help article I have quoted in my previous post, the RadDateInput parsing mechanism is designed to parse values in the widest possible input range. However when some of the date parts are missing the mechanism automatically applies the current date.

One possible approach to override this behavior is to manually construct the "complete" date (e.g. day/month/year) and set it to the RadDateInput control. The following code library project demonstrates this approach:

How to use RadDatePicker with a "MM/yyyy" formatted DateInput

I hope this helps,
Martin
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.

[Jeremy Yoder]

I'll give that a try, but the link didn't work. I get a page with the error: "It seems there was a problem with our server." Do you have a different link?

[Martin]

Hi Jeremy Yoder,

Indeed you are correct that the link was broken. I have already corrected it and you should be able to follow it now. You can also find the Code Library test project attached to this message.

Regards,
Martin
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.

[Jeremy Yoder]

Thanks for the example -- some slick coding in there! It's almost working, but when entering values, it fails if you don't enter 2 digits for month and 4 for year. So if I enter 7/07, it changes it to 07/2010. And if I enter 1/2008, it changes it to 3/2008. Also, our users could enter 5/7 (not even 07 for the year) which changes it to 05/2010.

In tracing the javascript, I found when entering the above values, the regular expression failed. So maybe that's all that needs to change, but I'm not sure since I'm not familar with them. Any idea how to account for those input values?

[Martin]

Hello Jeremy Yoder,

As the name of the example states, its Idea is to demonstrate how to implement the "MM/yyyy" format to the dateinput. If the user enters value that does not match this format (or any other format that could be selected from the combobox controls) then the picker will either parse the date using its build parsing mechanism or cancel the selected value. This behavior is controlled by two radio buttons just bellow the second combobox.

If you would like to "handle" more date format scenarios then you would need to modify the regular expression to reflect these formats. However please note that the exact expression would entirely depend on the developer's intentions.

For more information about Regular expressions you can check these resources:

Regular expressions in Javascript
Javascript RegExp object

Regards,
Martin
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.

[Jeremy Yoder]

Thanks for the input. I dug into the regular expression and found them not as bad as I expected. As a result, I got your example to work for the various inputs I mentioned above in a reusable custom control. It works really slick. Thanks a bunch for giving me a springboard to get started from, or I'd have been quite stuck.