Comments (8)
@estruyf I like that!
Dropdown was more close to the one we have in OOTB UI. But personally for me mask is better.
from sp-dev-fx-controls-react.
Hello everyone, I can help with this.
from sp-dev-fx-controls-react.
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?
from sp-dev-fx-controls-react.
Hi @robert-lindstrom!
I'm ok with merging your PR instead of mine as you added all needed changes to your PR. :)
from sp-dev-fx-controls-react.
@robert-lindstrom @AJIXuMuK I have also a version lying around with MaskTextField
s. 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.
from sp-dev-fx-controls-react.
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?
from sp-dev-fx-controls-react.
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
.
from sp-dev-fx-controls-react.
The new version is now building and will be released in a couple of minutes.
from sp-dev-fx-controls-react.
Related Issues (20)
- TaxonomyPicker Does not allow removing existing selection When the is disabled={!dpcRequest.LockedToMe} HOT 1
- Rich Text Component - Insert image using Copy Paste HOT 3
- Rich Text - Set default font size HOT 2
- [Dynamic Form] Update Form crashes on loading, if an item has TaxonomyFieldTypeMulti field. [3.16.1] !!! HOT 21
- FilePicker - best practice for storing files (images) uploaded via SPFX? HOT 1
- Unable to install latest version due to dependency HOT 4
- Error on rendering DynamicForm when having a Date Field with internal name starting with underscore ("_") HOT 3
- People picker issue when try to search by full name but works with upn HOT 7
- Documentation site unreadable with Edge, black on black HOT 3
- TaxonomyPicker continuously shows spinner instead of suggestion when typing and throw error in console HOT 6
- Treeview defaultexpanded state never changes HOT 2
- Treeview control, default selected key focus HOT 1
- Dynamic form loading error in other site HOT 5
- [DynamicForm] Issue when loading data from TaxonomyFieldTypeMulti, `results` sub-array appears randomly HOT 1
- [Dynamic Form][3.17] Required Field Validation won't work HOT 1
- Module not found - Wrong @fluentui imports cause webpack build errors HOT 8
- FilePicker can't browse "Your organisation" tab when used in webpart on the root/home SharePoint site HOT 1
- SitePicker, ListPicker & FieldPicker occasionally show options in background when using it in a dialog HOT 7
- PnP controls throwing error in SPFx webpart created using Teams Toolkit. HOT 1
- [Dynamic Form] Always Show Required Field Validation Error In "FormDisplayMode.Edit" Mode HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sp-dev-fx-controls-react.