Editors for WinRT - DateTimeEditBox

by Avatar Bill Henning (Actipro)
Friday, September 19, 2014 at 8:32am

PostBannerWinRTControlsDevNotes

In recent posts, we've shown off some of our new edit box controls for WinRT (Windows Store and Windows Phone apps).  We saw our DateEditBox, which is used for date input.  And then we saw our TimeEditBox, which is used for time input.  We also have a DateTimeEditBox, which can edit a date and time in the same control.  That's what we'll show in today's post.

Windows Store Variant

The DateTimeEditBox control is used to input a DateTime value, and uses a DateTimePicker control in its popup.

DateTimeEditBoxOpened

Edit boxes work great with a keyboard.  When the edit box is focused, values can be directly typed in.  Type in "9/9/14 10am", "09/09/2014 10:00", "2014-09-09 10AM", etc. and press Enter.  Any of those will commit the same date/time value.  You can also move the caret to one of the date/time components (month, day, year, hour, minute, second, AM/PM) and use keyboard arrow keys, PgUp/PgDn, or the mouse wheel to increment values.  Best of all, pressing the left/right arrow keys will instantly jump between the various "parts" (components) of the edit box value and select the part's text.

The date/time value can be displayed in any desired standard or custom format.  By default it will use the current culture's default date/time format.

If the user doesn't have a keyboard, mouse or touch can be used to display the popup.  The popup contains a HorizontalListBox at the top that switches between DatePicker and TimePicker controls.  These two pickers allow for easy mouse/touch selection of dates and times.

Compare to Native WinRT DatePicker and TimePicker

Most competitors have either made date and time pickers that show a large Windows Phone-like spinning selectors, or have gone with the multiple ComboBox approach like these native WinRT DatePicker and TimePicker controls do:

NativeDatePicker

TimePicker

Neither of those control types are ideal for WinRT apps that can potentially be run on large desktops with keyboards.  Compare the usability of the above to our single control:

DateTimeEditBoxClosed

Windows Phone Variant

Just like our other edit boxes, this edit box will render itself like a button when used on Windows Phone.  Tapping the button shows a full screen picker (same as above) where the date value can be selected.

Summary

This post shows how an DateTimeEditBox control can accept date and time input in a single control within a Windows Store or Windows Phone app.  Download our WinRT/XAML Controls to check it out, along with our other beautiful and functional editor controls!

TaskDownload TaskLiveDemo TaskBuyNow

Tags: winrt, editors

Add Comment

Please log in to a validated account to post comments.