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

Usability issues with date picker

9 Answers 435 Views
Calendar, DateTimePicker, TimePicker and Clock
This is a migrated thread and some comments may be shown as answers.
Kevin Meyer
Top achievements
Rank 1
Kevin Meyer asked on 27 May 2008, 01:53 PM
We are experiencing a few useability issues with the date picker.  They are so frustrating for our customers that I've spent a few days trying to hack together a custom rad element that works as needed both in standard form editing, and in in-line grid editing.

I am not having much success building a custom date picker element due to issues with the RadMaskedEditBox.  I'm hoping you have work arounds or configurations I'm missing within the standard date time picker.  Here are our issues:

1. User clears the date picker with the Delete key and opens the Calendar.  It defaults to 01/01/1900 (the current NullDate) which is virtually useless.  The masked edit box behaves similarly when the user begins editing a date picker that is cleared.
2. Users are having difficulties getting used to the masked edit box.  How can we modify the control to accept "04172008" and format it "04/17/2008". Note: we still must enforce valid day/month/years, but do not want to require users to type the "/" or arrow key to the next section.

Any guidance is much appreciated.

9 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 28 May 2008, 11:18 AM
Hi Kevin Meyer,

You can find the answers to your questions in the support ticket you have opened. You can also read the same answers below:

1. The user clears the date picker with the Delete key and opens the Calendar. It defaults to 01/01/1900 (the current NullDate) which is virtually useless. The masked edit box behaves similarly when the user begins editing a date picker that is cleared." This behavior is normal - the calendar shows the current value of the RadDateTimePicker. If the value is 01/01/1900 then the calendar would be focused on this value. If you want to change the view of RadCalendar use its FocusedDate property. To get the instance of RadCalendar from RadDateTimePicker you can do the following:

RadCalendar calendar = (this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar).Calendar; 

2. To do that, you have to use the MaskType standard type of the mask box. We already have an example of editing such values (short date) in our QSF (Editors\RadMaskedEditBox\First Look).

Q:How to define a mask?:
A:Use the Mask property of the mask box.

You should set the mask to "00/00/0000" to achieve the behavior you are describing. You do not need to explicitly type the parentheses when you have such a mask.

Q:How to change the mask type (Standard, DateTime or Numeric)
A:Use the MaskType property.

Q:How to change the current culture used in the mask box
A:Use the Culture property.

3. As I wrote in another thread: To set the ReadOnly state of the maskededit when the value is NullDate do the following:

1. Subscribe to the MouseUp event:

this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.HostedControl.MouseUp +=new MouseEventHandler(HostedControl_MouseUp); 

2. In the MouseUp event handler, set the ReadOnly to false:

void HostedControl_MouseUp(object sender, MouseEventArgs e)     
{     
    PropertyInfo info = this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.HostedControl.GetType().GetProperty("ReadOnly", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Instance);     
    info.SetValue(this.radDateTimePicker1.DateTimePickerElement.TextBoxElement.TextBoxItem.HostedControl, falsenull);     

If you have additional questions, do not hesitate to contact me.

Sincerely yours,

Nikolay
the Telerik team


Instantly find answers to your questions at the new Telerik Support Center
0
Robyn
Top achievements
Rank 1
answered on 22 Dec 2011, 01:33 AM
Hi,

I am following up and have posted a thread about this already. This thread seems to suggest it has the solution I need but I was having trouble setting the MaskType property in the RadDateTimePicker control.

I am using q3 2011 controls and have the following code inside my controlLoad event

this.DateTimePickerElement.TextBoxElement.MaskType = Telerik.WinControls.UI.MaskType.Standard; 
this.DateTimePickerElement.TextBoxElement.Mask = "00/00/0000";

(I am trying to set the values you have suggested in this forum to get the behaviour we want (no need to press the right arrow) to move to the next part of the date input).

Unfortunately, when the code executes this block of code I get a 
"Specified cast is not valid." error with the following stack:

at Telerik.WinControls.UI.RadDateTimePickerElement.RadDateTimePickerElement_ValueChanged(Object sender, EventArgs e)
   at System.EventHandler.Invoke(Object sender, EventArgs e)
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.CallValueChanged(EventArgs e)
   at Telerik.WinControls.UI.StandartMaskTextBoxProvider.Validate(String value)
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.set_Text(String value)
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.CreateMaskProvider()
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.set_Mask(String value)
   at Telerik.WinControls.UI.RadDateTimePickerCalendar.SetDateByValue(Nullable`1 date, DateTimePickerFormat formatType)
   at Telerik.WinControls.UI.RadDateTimePickerElement.set_Value(Nullable`1 value)
   at Telerik.WinControls.UI.RadDateTimePickerCalendar.maskBox_ValueChanged(Object sender, EventArgs e)
   at System.EventHandler.Invoke(Object sender, EventArgs e)
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.CallValueChanged(EventArgs e)
   at Telerik.WinControls.UI.MaskDateTimeProvider.set_Value(Object value)
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.set_Value(Object value)
   at Telerik.WinControls.UI.RadMaskedEditBoxElement.set_MaskType(MaskType value)
   at DirectControl.WinUI.Controls.DCDateTimePicker.OnLoad(Size desiredSize)
   at Telerik.WinControls.RadControl.LoadElementTree(Size desiredSize)
   at Telerik.WinControls.RadControl.OnCreateControl()
   at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
   at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
   at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
   at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
   at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
   at System.Windows.Forms.Control.CreateControl()
   at System.Windows.Forms.Control.WmShowWindow(Message& m)
   at System.Windows.Forms.Control.WndProc(Message& m)
   at System.Windows.Forms.ScrollableControl.WndProc(Message& m)
   at System.Windows.Forms.ContainerControl.WndProc(Message& m)
   at System.Windows.Forms.Form.WmShowWindow(Message& m)
   at System.Windows.Forms.Form.WndProc(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
   at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

I've read on several pages including the documentation that alludes to the ability to enter dates in this simplified manner, but any attempt at the solutions posted keep running me into a wall like this. Am I missing something obvious? ;)

Thanks
0
Peter
Telerik team
answered on 26 Dec 2011, 03:21 PM
Hi Robyn,

Thank you for writing.

Since Q2 2011 our RadDateTimePicker internally supports only DateTime mask type. The reason for that its because the value should always be able to cast to DateTime type.  

In order to control the selected elements of the date without pressing the arrow keys or the backslash key, you should subscribe to the KeyDown event of the TextBoxItem and control the selected part of the date manually. In the attached solution, I have implemented a sample case where the second time when you press a digit when the date or the month is selected, the selection moves to the right.

I hope this helps. Should you have any other questions, do not hesitate to write back.

Kind regards,
Peter
the Telerik teamQ3’11 of RadControls for WinForms is available for download (see what's new). Get it today.
0
Robyn
Top achievements
Rank 1
answered on 28 Dec 2011, 12:36 AM
Hi Peter,

Thanks so much for the sample. This was the direction I was trying to head in after discovering that the DateTimePicker does not support the method of input I was after.

I found that using your sample, the carat position would persist in each segment of the date which would mess up the entry if you used a combination of entry methods on the same control. 

Below, is a snippet of the final code I have if anyone is interested. (You'll notice I am setting the value of each item in the provider list when I believe the user is expecting the entry to start from the first position). It's not really 'clean' but I couldn't find any other way to reset the cursor position within each field.
You will also notice, I've included a counter for the Year position to help track when the user is expecting the year to reset (ie, when the user mouse clicks the year segment they probably expect to start entering the year from scratch).

Interestingly, I also had to change the day/month threshold to 3. I found that this event was being triggered BEFORE the key event and entered number went to the control, This may be due to the way I handled the event in the custom control, but I'm not sure. I had to change some counter behavior accordingly too.

int day = 0;
int month = 0;
int year = 0;
void TextBoxItem_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyData == Keys.Decimal || e.KeyData == Keys.Divide)
    {
        Telerik.WinControls.UI.RadTextBoxItem item = sender as Telerik.WinControls.UI.RadTextBoxItem;
        Telerik.WinControls.UI.RadMaskedEditBoxElement element = item.Parent as Telerik.WinControls.UI.RadMaskedEditBoxElement;
        Telerik.WinControls.UI.MaskDateTimeProvider provider = element.Provider as Telerik.WinControls.UI.MaskDateTimeProvider;
        provider.SelectNextEditableItem();
        day = 0;
        month = 0;
        year = 0;
 
    }
    else if ((e.KeyCode >= Keys.D0 && e.KeyCode <= Keys.D9) || (e.KeyCode >= Keys.NumPad0 && e.KeyCode <= Keys.NumPad9) || e.KeyCode == Keys.Decimal)
    {
         
 
        Telerik.WinControls.UI.RadTextBoxItem item = sender as Telerik.WinControls.UI.RadTextBoxItem;
        Telerik.WinControls.UI.RadMaskedEditBoxElement element = item.Parent as Telerik.WinControls.UI.RadMaskedEditBoxElement;
        Telerik.WinControls.UI.MaskDateTimeProvider provider = element.Provider as Telerik.WinControls.UI.MaskDateTimeProvider;
 
 
 
        switch (provider.List[provider.SelectedItemIndex].type)
        {
 
            case Telerik.WinControls.UI.PartTypes.Day:
                if (day == 0)
                {
                    provider.List[provider.SelectedItemIndex].value = 0;
                }
                day++;
                break;
            case Telerik.WinControls.UI.PartTypes.Month:
                if (month == 0)
                {
                    provider.List[provider.SelectedItemIndex].value = 12;
                }
                month++;
                break;
            case Telerik.WinControls.UI.PartTypes.Year:
                if (year == 4)
                {
                    year = 0;
                }
                if (year == 0)
                {
                    provider.List[provider.SelectedItemIndex].value = 1900;
                }
                year++;
                break;
        }
 
        if (day == 3)
        {
            provider.SelectNextEditableItem();
            provider.List[provider.SelectedItemIndex].value = 12;
            day = 0;
            month++;
        }
        if (month == 3)
        {
            provider.SelectNextEditableItem();
            provider.List[provider.SelectedItemIndex].value = 1900;
            month = 0;
            year++;
        }
    }
    else if (e.KeyData == Keys.Left || e.KeyData == Keys.Right || e.KeyData == Keys.Divide)
    {
        day = 0;
        month = 0;
        year = 0;
    }
}


With these modifications to your sample to resolve the issue above I've got my picker now supporting all methods of input we are after:
ddMMyyyy
dd/MM/yyyy
dd.MM.yyyy

I have all this coded into a custom control, this will obviously only support the dd/MM/yyyy mask, I can provide more detail upon request but I believe the usability via text entry is widely improved without the loss of date validation and the other features provided by the datetimepicker (calendar selection and up/down pickers).

Thanks for you help, always great support here - hopefully this can help others with a similar need.
Connect Direct Team
0
Stefan
Telerik team
answered on 30 Dec 2011, 04:01 PM
Hi Robyn,

Thank you for sharing your extended solution. I believe that the community will benefit from it.
 
Regards,
Stefan
the Telerik teamQ3’11 of RadControls for WinForms is available for download (see what's new). Get it today.
0
Justin
Top achievements
Rank 1
answered on 01 Jul 2013, 09:16 AM
I am also trying to support ddMMyyyy entry of the date into a datetimepicker.

The following code (from Robyn's solution) does not work for me.

Dim item As Telerik.WinControls.UI.RadTextBoxItem = TryCast(sender, Telerik.WinControls.UI.RadTextBoxItem)
Dim element As Telerik.WinControls.UI.RadMaskedEditBoxElement = TryCast(item.Parent, Telerik.WinControls.UI.RadMaskedEditBoxElement)
Dim provider As Telerik.WinControls.UI.MaskDateTimeProvider = TryCast(element.Provider, Telerik.WinControls.UI.MaskDateTimeProvider)


Has something changed? I am using 2013.2.612.40

Justin
0
Stefan
Telerik team
answered on 04 Jul 2013, 07:52 AM
Hi Justin,

I am not sure why it is not working for you. I have just changed the assembles and replaced the code with the one suggested by Robyn and it is working as expected on my side - see attachment.

For your convenience I have provided both C# and VB projects.

I hope this helps.
 

Regards,
Stefan
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Albert
Top achievements
Rank 1
answered on 12 Apr 2021, 04:52 PM

Hi guys

We are working with version \lib\RCWF\2020.3.1020.40\

We downloaded and tried to check the attached project 140349 but once checked we noticed that it doesn't work as expected.

 

If I try to input a date 23/11/2020 we saw that the first number (2) goes to the day section but the second character (3) goes to the month section.

Do yo hace any update about this?.

the code we are checking is next one:

 

       void TextBoxItem_KeyDown(object sender, KeyEventArgs e)
        {
    

            if ((e.KeyCode >= Keys.D0 && e.KeyCode <= Keys.D9) || (e.KeyCode >= Keys.NumPad0 && e.KeyCode <= Keys.NumPad9) || e.KeyCode == Keys.Decimal)
           {
                RadTextBoxItem item = sender as RadTextBoxItem;
                RadMaskedEditBoxElement element = item.Parent as RadMaskedEditBoxElement;
                MaskDateTimeProvider provider = element.Provider as MaskDateTimeProvider;
               
                switch (provider.List[provider.SelectedItemIndex].type)
                {
                    case PartTypes.Day:
                        day++;
                        break;
                    case PartTypes.Month:
                        month++;
                        break;
                }

                if (day == 2)
                {
                    int i = e.KeyValue; 
                    provider.SelectNextEditableItem();
                    day = 0;

                }
                if (month == 2)
                {
                    provider.SelectNextEditableItem();
                    month = 0;
                }
            }
            else if (e.KeyData == Keys.Left || e.KeyData == Keys.Right || e.KeyData == Keys.Divide)
            {
                day = 0;
                month = 0;
            }
        }

 

 

 

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 13 Apr 2021, 09:06 AM
Hello, Albert, 

I have downloaded Stefan's project (140349.zip) and tested with the latest version of the Telerik UI for WinForms suite. When the day part is selected and I type "23", the day is successfully changed on my end. Then, you can navigate to the month part by pressing -> or just clicking the month part. Please refer to the attached gif file illustrating the observed behavior on my end.

However, according to the provided code snippet in your post, if the day is "2", the next part is selected which is the month:

                if (day == 2)
                {
                    int i = e.KeyValue; 
                    provider.SelectNextEditableItem();
                    day = 0;

                }

That is why you observed the mentioned behavior.

I would like to note that in R2 2014 we introduced free form date parsing implemented by a new MaskType for RadMaskedEditBox. It is designed to work with DateTime objects and it is not format restricted. With the new MaskType the input string is parsed to valid DateTime object

https://docs.telerik.com/devtools/winforms/controls/editors/datetimepicker/free-form-date-time-parsing 

I think that it may be more appropriate for your scenario. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Calendar, DateTimePicker, TimePicker and Clock
Asked by
Kevin Meyer
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Robyn
Top achievements
Rank 1
Peter
Telerik team
Stefan
Telerik team
Justin
Top achievements
Rank 1
Albert
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or