Microsoft-ui-xaml: Proposal: Improve CalendarDatePicker flyout editing

[robloo]

Proposal: Improve CalendarDatePicker Flyout editing

We need to improve editing of the selected date in the CalendarDatePicker Flyout. These improvements are primarily necessary to speed up editing by the user.

This is related to but different from the improvements mentioned in #735.

Summary

The current CalendarDatePicker Flyout is slow to use when editing a date. It is deficient in the following areas:

1. There is no visual indication that the title can be pressed
2. Pressing the title once goes to month view, twice goes to year view, and on older controls (WPF?) you could even press it a third time and go to a decade view I believe. This multiple pressing is not always ideal.
3. The year, month, and day must all be set at once. There is no mechanism to modify only the year or month of the currently selected date. This means just changing the year requires re-selecting the month and day.

Each of these three points can be improved at once.

Current Design

Proposed Design
Credit as always for these types of illustrations goes to @mdtauk comment.

The top of the Flyout can now independently select day/month/year. Note that the control logic would also change and it will no longer be necessary to set the year, then always the month and day. Any component of the date will be modifiable and the other already selected components will persist.

Old Proposal
The old proposal copied below added ComboBoxes to select the Month/Year. This was considered non-ideal for a few reasons including nested flyouts.

Rationale

The current calendar date picker is slow and somewhat unintuitive to use for the user.

Scope

| Capability | Priority |
| :---------- | :------- |
| Allow month selection independent of year and day in the Flyout | Must |
| Allow year selection independent of month and day in the Flyout | Must |
| Add configuration to keep the current design for backwards compatibility | Should |

Edits: This proposal has been updated to capture the latest discussion and ideas below.

[mdtauk]

Isn't this why there is the DatePicker with the calendar flyout?

Maybe that should get an IsEditable property. There was an issue about making those pickers better for keyboard use. #918 #905 #735

[robloo]

@mdtauk, I'm not sure I understand your comments entirely. I'm talking about the CalendarDatePicker which is different than the DatePicker. The CalendarDatePicker does look exactly as you pictured though. I did only screenshot and modify the relevant part -- the calendar flyout only.

Maybe that should get an IsEditable property

I wouldn't suggest that for this case. I'm talking about only the flyout which is already the editor. Once the flyout is open the user is already editing, I'm only trying to make this experience faster. Now if we made the inline textbox area (not the flyout) editable like in #735 that could use the IsEditable property.

There was an issue about making those pickers better for keyboard use. #918 #905 #735

Yes, I referred to #735 in the proposal but this is quite a bit different -- although the spirit is the same (to improve the editing experience).

[mdtauk]

@robloo I do not think your idea is a good solution for having an editable date picker. The control is designed to be a fixed size, and the additional weight of combo boxes feels clunky. I think keeping the control a pure calendar grid viewer is a good idea, but there are other ideas that achieve the same thing, fast way to pick a date, by handling it in the form control Date Picker or Calendar Picker.

[robloo]

@mdtauk, I respectfully disagree. There is also precedent for my suggestion. Microsoft has internally decided it is a valid solution to the problem:

This is taken from the developer dashboard. I don't know the web framework they used off the top of my head.

I see this as somewhat of an elegant solution as it maintains the same size of the current flyout; however, significantly speeds up selecting different months/years. No longer does the user have to click the Month/Year title to navigate to Year and Decade views (which is not only more time consuming but more complex I would argue).

If someone likes to use more of a form-style control they can keep using the DatePicker or the CalendarView.

Edit: Just to be sure we are not confusing controls, I'm talking only about the CalendarDatePicker.

[robloo]

If it's the concept of nested flyouts you don't like, I can understand that as well (there is a framework bug for that...). It's also possible to rework the existing control to press the month and year separately. This could use existing designs instead of adding ComboBoxes. The downside is you loose the drop down symbol and ComboBox appearance so the user doesn't always know they can click that area (this has long been a design deficiency in this type of control).

Pressing the month title April goes directly to the month view (as it already does).

But pressing year title 2020 would go directly to the year view. This would prevent having to click the title twice.

[mdtauk]

Making the Month and Year tap-able I think is a better option than ComboBoxes.

FluentUI has a property that does this. (formerly Fabric UI)

The new Edgium form control does it

---

You can sort of do what you want currently with the Xaml control

It just takes two taps to get to the year selection/decade view

[robloo]

You can sort of do what you want currently with the Xaml control
It just takes two taps to get to the year selection/decade view

Yes, I'm aware. It is slow and somewhat unintuitive to use (especially when entering a lot of dates in different months/years):

1. There is no visual indication that the title can be pressed
2. Pressing the title once goes to month view, twice goes to year view, and on older controls you could even press it a third time and go to a decade view I believe. This multiple pressing is not always ideal.
3. The year, month, and day must all be set at once. There is no mechanism to modify only the year or month of the currently selected date. This means just changing the year requires re-selecting the month and day.

So it seems no. 3 is the main point I'm trying to improve. Make the day, month and year independently selectable. That could be done by improving the flyout UI as discussed above and also by making the box editable (#735).

[mdtauk]

1. The year, month, and day must all be set at once. There is no mechanism to modify only the year or month of the currently selected date. This means just changing the year requires re-selecting the month and day.

So it seems no. 3 is the main point I'm trying to improve. Make the day, month and year independently selectable. That could be done by improving the flyout UI as discussed above and also by making the box editable (#735).

Something like this would also make date picking simpler.

[mdtauk]

To make it work nicely, the whole control would need some tweaks.

[robloo]

Really, really, like the last set of illustrations. I'm not using a DatePicker because the calendar makes it easier to select dates in some cases.

[mdtauk]

Here is one with a slightly cleaner header, similar to the Pivot

[robloo]

I've updated the proposal to capture the latest discussion. Thanks @mdtauk for the great illustrations and ideas.

[shaheedmalik]

To make it work nicely, the whole control would need some tweaks.

Can you make one with MM DD YY format?

[mdtauk]

Can you make one with MM DD YY format?