A date Picker control

[russgove]

Category

[ x] Enhancement

A datepicker that works like the classic datepicker-- has an option to include time, or not.

[mindlabco]

Hello everyone, I can help with this.

[robert-lindstrom]

I created a PR for adding a DateTimePicker (#255) not realizing that a PR (#240) already existed. I am very interested in seeing a DateTimePicker merged and wanted to start a discussion around this. Not sure if this is the right place but I will start here.

Some comments regarding my PR:
Just like #240 I based my design on the existing PropertyFieldDateTimePicker. I added some modifications intended to make the interface more like the existing DatePicker from Office UI Fabric. The most notable change was to use a value property instead of the initialDate property used in the property field control. In my opinion we should try to follow Office UI Fabric as closely as possible.

After realizing the existence of #240 I ported some of it's features to this PR. @AJIXuMuK I hope this was ok? Noteably:

• table markup is changed with display: flex markup
• formatDate is now used to format date in DatePicker
• AM/PM designators are read from locale strings
• A string property is supported for setting the strings used by the control. This extends the
  DatePicker strings property and passes it contents to the DatePicker control used.
• A property flag (showSeconds) to show or hide seconds dropdown is used. I default this to false
  i.e., seconds dropdown not shown to mimic historic SharePoint behavior.

I intentionally left out the minDate and maxDate properties since I think they (if supported) should validate the entire Date object including hours, minutes and seconds, not just the date part as the #240 implementation does.

Hopefully, this post can start a discussion that leads to a DateTimePicker being merged soon. What are your thougths @estruyf @AJIXuMuK?

[AJIXuMuK]

Hi @robert-lindstrom!
I'm ok with merging your PR instead of mine as you added all needed changes to your PR. :)

[estruyf]

@robert-lindstrom @AJIXuMuK I have also a version lying around with MaskTextFields. Needs to have a bit more improvements, so will try to add it as well and merge it to the branch of @robert-lindstrom to test out.

[estruyf]

Just pushed my changes. Feel free to test it out in the following branch: https://github.com/SharePoint/sp-dev-fx-controls-react/tree/SherpasGroup-AddDateTimePickerControl

The hours, minutes and seconds components make use of the MaskTextField from Office UI Fabric. This allows you to specify a mask for a text value to input. The mask is a regular expression that works only per character. IMO this allows a bit more flexibility for the end user to enter the values, instead of selecting from the dropdown.

What do you guys think @robert-lindstrom @AJIXuMuK?

[AJIXuMuK]

@estruyf I like that!
Dropdown was more close to the one we have in OOTB UI. But personally for me mask is better.

[estruyf]

Merged it to the DEV branch, so this can now be tested out in the latest beta and will be available in 1.13.0.

[estruyf]

The new version is now building and will be released in a couple of minutes.