In this post I am not going to focus on how to work with SharePoint API, create a first app, and deploy it because Microsoft already prepared sample projects and documentation together with a 6-part YouTube tutorial (link : http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part). But, to say it short, I wrote how to run a created project.
- At first you should create a project using this command: “yo @microsoft/sharepoint”
- Run IDE, in my case that would be a Visual Studio code.
- Helper command line editor to : cmder (http://cmder.net/)
A code with a simple date picker:
A file can be divided into 3 parts:
- Import part
- Entered properties
- Main class rendering
Ad a) The most important is to load a module datepicker and choose properties which it would use. I’m using directive “DatePicker” and enum “DayOfWeek”
Ad b) A standard mechanism which allows transferring properties to the JSX
Ad c) The main method in the class is render. Render returns html tags.
In the method “render”, I used the tag DatePicker, that is a react directive and has one property required: strings. This property is the object “IDatePickerStrings” which renders names in picker.
I prepared helpers private method and properties. When you run gulp you should see that control:
Of course this names took the object “IDatePickerStrings”. It is a beta and many CSS are maybe not as pretty in all web browser.
onSelectDate: (date:Date) => run when we click a new date. Fig.1
formatDate (date: Date) => custom format string in display label in the DatePicker. Fig.2
parseDateFromString (dateStr: string) => Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true. Fig.3
allowTextInput : Boolean => Whether the DatePicker allows input a date string directly or not. Fig.4
firstDayOfWeek : DayOfWeek => The first day of the week. Fig.5
label: String => Label for the DatePicker Fig.6
isRequired : Boolean => Whether the DatePicker is a required field or not. Fig.7
ariaLabel: String => Aria Label for TextField of the DatePicker for screen reader users. Fig.8
isMonthPickerVisible : Boolean => Whether the month picker is shown beside the day picker or hidden. Fig.9
Placeholder: string => Placeholder text for the DatePicker. Fig.10
Value:Date => Default value of the DatePicker, if any. Fig.11
Images events and properties
I have noticed a few bugs, for example the mobile mode is not responsive (Fig.12).
Also not all CSS work correctly (Fig.13).
All code found in my github : https://github.com/PawelHaracz/SharepointApi/tree/master/Presentations/DatePicker
If you have more thoughts about this post please leave a comment 🙂