Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A date Picker control #21

Closed
russgove opened this issue Dec 19, 2017 · 8 comments

Comments

Projects
None yet
6 participants
@russgove
Copy link
Contributor

commented Dec 19, 2017

Category

[ x] Enhancement

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

@mindlabco

This comment has been minimized.

Copy link

commented Sep 20, 2018

Hello everyone, I can help with this.

@robert-lindstrom

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2019

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

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented Mar 29, 2019

@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 added a commit that referenced this issue Mar 29, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented Mar 29, 2019

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.

Screenshot 2019-03-29 20 41 03

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

@AJIXuMuK

This comment has been minimized.

Copy link
Contributor

commented Apr 6, 2019

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

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented Apr 9, 2019

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 estruyf added this to the 1.13.0 milestone Apr 9, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

commented Apr 24, 2019

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

@estruyf estruyf closed this Apr 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.