With Q2 2014 we introduced a great number of highly requested features enhancing your end-user’s experience with dates and time. In this blog post I will share more details about the improvements and how you can easily enable them in your applications.

The first and my favorite of which is the free form date time parsing.

Free-Form Data Parsing

RadMaskedEditBox, RadDateTimePicker and RadTimePicker got updated with a free form date time parsing functionality. Thanks to it, the end-users can now enter a date-time value without having to conform to a specific date-time format. The editors will try to interpret the freely entered data, and if the parsing operation is successful, they will consider that data as the selected date and time.

Here are a few examples of the possible usages of the functionality. Note that the date time parsing is culture specific, and the culture used in the below examples is “en-US”.


To enable the non-restrictive mode of RadMaskedEditBox, the MaskType should be set to FreeFormDateTime:

radMaskedEditBox1.MaskType = MaskType.FreeFormDateTime;
RadMaskedEditBox1.MaskType = MaskType.FreeFormDateTime
  • Now you can enter “1 jan 2015 11 20” and the control will successfully parse it to 1/1/2015, 11:25 AM

  • If the control’s mask is set to time only:

    radMaskedEditBox1.Mask = "t";

    RadMaskedEditBox1.Mask = "t"

    then entering “4 20” will parse it to 4:20 AM

  • Entering “040506” when the control’s mask is “d” 

    radMaskedEditBox1.Mask = "d";
    RadMaskedEditBox1.Mask = "d"

    will parse it to 4/5/2006


To enable the free form date time parsing in RadDateTimePicker, one needs to set the MaskType of the inner masked edit box: 

this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.MaskType = MaskType.FreeFormDateTime;
Me.radDateTimePicker1.DateTimePickerElement.TextBoxElement.MaskType = MaskType.FreeFormDateTime
Here are a few examples:
  • Entering “030706” will parse the input to March 7, 2006

  • Entering “03072016” will again parse the input to March 7, 2016


Enabling the free form of RadTimePicker uses the same approach as above:

radTimePicker1.TimePickerElement.MaskedEditBox.MaskType = MaskType.FreeFormDateTime;
radTimePicker1.TimePickerElement.MaskedEditBox.MaskType = MaskType.FreeFormDateTime


  • Entering “3 25” will result in  3:25 AM

  • Entering “18 45” will result in 6:45 PM

Of course, all parse operations are validated according to the control’s minimum and maximum range.

Technical details: To learn more about the algorithm used for the implementation, please refer to this blog post. For more information about the supported feature, have a look here.

Zoom Navigation

By default, clicking the month text in the header of RadCalendar/RadDateTimePicker will show a popup allowing for fast navigation back and forth by a few months: 

As of Q2 2014, RadCalendar (and respectively RadDateTimePicker) now support months/years/decade navigation, by clicking the month header in the controls.

To enable the zooming navigation mode, you need to set the HeaderNavigationMode property to Zoom:

this.radCalendar1.HeaderNavigationMode = HeaderNavigationMode.Zoom;

Me.RadCalendar1.HeaderNavigationMode = HeaderNavigationMode.Zoom

There are four different zoom levels: Days, Months, Years and YearsRange. These are controlled via the ZoomLevel property of the control. For example, you might want the control to show just the months when you application starts up:

this.radCalendar1.ZoomLevel = ZoomLevel.Months;

Me.RadCalendar1.ZoomLevel = ZoomLevel.Months

Another useful thing this goodie provides is the ability to restrict which zoom levels the users can access. This allows you to turn RadCalendar/RadDateTimePicker into a month picker for example. This can be achieved by the usage of the ZoomChanging event:

void radCalendar1_ZoomChanging(object sender, CalendarZoomChangingEventArgs e)
    if (radCalendar1.ZoomLevel == ZoomLevel.Months)
        e.Cancel = true;

Private Sub radCalendar1_ZoomChanging(sender As Object, e As CalendarZoomChangingEventArgs)
    If radCalendar1.ZoomLevel = ZoomLevel.Months Then
        e.Cancel = True
    End If
End Sub

As always, the ___ing event has its ___ed counterpart – ZoomChanged that informs you when the zoom level has been changed. 

Of course, all these customizations apply to RadDateTimePicker as well, as the latter internally hosts RadCalendar:

RadDateTimePicker Enables Picking Both Date and Time

Another highly demanded feature is for the end user to be able to pick both date and time in RadDateTimePicker. With the latest bits, this is now possible. Enabling time picker in RadDateTimePicker is as easy as setting the following property:

this.radDateTimePicker1.DateTimePickerElement.ShowTimePicker = true;

Me.RadDateTimePicker1.DateTimePickerElement.ShowTimePicker = True

In addition, you might want to customize the format the date in the control is displayed in order to accommodate time as well:

this.radDateTimePicker1.Format = DateTimePickerFormat.Custom;
this.radDateTimePicker1.CustomFormat = "MMM - dd - yyyy hh:mm tt";

Me.radDateTimePicker1.Format = DateTimePickerFormat.Custom
Me.radDateTimePicker1.CustomFormat = "MMM - dd - yyyy hh:mm tt"

Setting time range in RadTimePicker

If you want to provide a time picker, allowing for picking up time within a certain range, then no problem, RadTimePicker has you covered. This can be easily achieved by using the MinValue and MaxValue properties of the control:

radTimePicker1.MinValue = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 8, 0, 0);
radTimePicker1.MaxValue = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 17, 0, 0);

radTimePicker1.MinValue = New DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 8, 0, 0)
radTimePicker1.MaxValue = New DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 17, 0, 0)

This is it, folks. With all these new features at hand, entering date will feel like a breeze to the end-users.Happy coding!

Stefan Stefanov
About the Author

Stefan Stefanov

Stefan Stefanov (MCPD) is a Senior Manager, Product Management and Product Marketing at Progress. He has been working with Telerik products since 2010, when he joined the company. Off work he enjoys traveling, hanging out with friends and reading various technology blogs. You can find Stefan on Twitter and LinkedIn.

Related Posts


Comments are disabled in preview mode.