Follow

Date Picker (Deprecated)

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
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments