Usability issues with date picker

8 posts, 0 answers
  1. Kevin Meyer
    Kevin Meyer avatar
    36 posts
    Member since:
    Dec 2007

    Posted 27 May 2008 Link to this post

    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.
  2. Nikolay
    Admin
    Nikolay avatar
    1803 posts

    Posted 28 May 2008 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Robyn
    Robyn avatar
    17 posts
    Member since:
    Aug 2011

    Posted 21 Dec 2011 Link to this post

    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
  5. Peter
    Admin
    Peter avatar
    1148 posts

    Posted 26 Dec 2011 Link to this post

    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.
  6. Robyn
    Robyn avatar
    17 posts
    Member since:
    Aug 2011

    Posted 27 Dec 2011 Link to this post

    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
  7. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 30 Dec 2011 Link to this post

    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.
  8. Justin
    Justin avatar
    8 posts
    Member since:
    Aug 2011

    Posted 01 Jul 2013 Link to this post

    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
  9. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 04 Jul 2013 Link to this post

    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 >>
Back to Top
UI for WinForms is Visual Studio 2017 Ready