The Date Picker control allows for the specification of a date (only, no time) thru an entry field or a Calendar widget.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
The Date Picker Control can be bound to a Date variable.
This control is most commonly used when a date is needed on a Coach.
Appearance
DatePicker Type Text Input or Inline
Width Can be used on text input type calendars, acceptable parameters are px, %, or em, if no unit is specified px is assumed
Size Default, Large, Small
Label Placement Top, Left
Format Default is “mm/dd/yyyy” acceptable combinations are:
d, dd, D, DD, m, mm, M, MM, yy, yyyy
- d, dd: Numeric date, no leading zero and leading zero. Ex. 5, 05
- D, DD: Abbreviated and full weekday names. Ex. Mon, Monday
- m, mm: Numeric month, no leading zero and leading zero. Ex. 7, 07
- M, MM: Abbreviated and full month names. Ex. Jan, January
- yy, yyyy: 2 and 4 digit years. Ex. 12, 2012.
Note: The abbreviated and full month (M, MM) and abbreviated and full weekday names above (D, DD) do not support all capitalized letters (e.g. MAR, MARCH, MON, MONDAY). The control only supports the mixed-case formats shown above.
Week Start Choose day to start week; ex. Sunday
Disabled Week Days Disable certain days to be blocked on calendar
Show Today Button Button that defaults to today's date
Show Clear Button Button that clears date value
Orientation The orientation of the calendar when clicked
Color Style
Show Week Number Shows the number of week it is in the year
Highlight Today
Behavior
Tab Index Form control tabbing sequence index. Tab indices start at 1, and may be set sparsely
Placeholder Text "Ghost" text displayed when no input
Available Start Date Dates before the start date will be blocked out
Available End Date Dates after the end date will be blocked out
Start View View of the calendar
Minimum View Mode
No Auto-close
Example
These are the configuration option settings...
This is the result...
You can place a Date Picker control inside of an Input Group Control to have a clickable calendar button. In the Input Group's configuration options set the 'Button Kind' to 'Icon' and set the 'Button Info' to 'calendar.' In the 'On Button Click' event put: ${Control Id}._instance.pickerControl.show();
Events
With the Date Picker control, there are 3 types of event handlers:
- On Load When the page loads
- On Change When there is a change
- On Day Cell Render When there is a day cell render
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
- Author: Courtney Silva
- Date Created: June 5, 2015
- Date Modified: March 18, 2016
Comments