Date/time picker

Restrictions and limitations

If the user types in content that is not a complete date or not in a valid format, the bound data item is null when the user triggers a boundary event such as clicking a button. If the flow returns to the page, the view is empty. Any other views that are bound to the same data item are also empty.

Using native date and time pickers means that some configuration properties are not applicable, such as the following properties:

• Disabled week days
• Blackout dates
• Blackout date start
• Blackout date end
• Week start
• Calendar type (when Hebrew or Islamic is selected)
• Date Picker type (when Inline is selected)

Data binding

Set or modify the data binding for the view in the General properties tab. The data binding contains the initial date and time to display and stores updates to the value. The data type is Date.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

The appearance configuration properties for Date/time picker are shown in the following table:

Table 1. Appearance configuration properties for Date/time picker

Appearance configuration property	Description	Data type
Date Picker type	The type of calendar display for the date time picker: Text Input: This calendar display features a text input box and initially hides the calendar. When the text box is clicked, the calendar is displayed. Inline: This calendar display features an inline calendar and hides the text input box. The default value is Text Input.	DatePickerType
Width	The width of the date time picker when the Text Input type is selected for the Date Picker type property. You can specify the width in px (pixels), % (percent), or em units. For example, 200px. If no unit type is specified with the numeric value, then px is assumed. By default, no width is specified.	String
Size	The size of the text in the view, the size of the label text, and the amount of padding around the text. For example, to make the text and label more readable on smart phones, you can set this configuration option to Large to compensate for the small screen size.	TextSizeStyle
Label placement	The label placement location for the date time picker.	LabelPlacement
Label width	The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed.	String
Format	The format used to display and parse text that is entered into the text field. It accepts a variety of date inputs, including formats that are closer to natural language, with or without separators, day and month only, day only, and so on (MM/dd/yyyy, dd/MM/yyyy, yyyy-MM-dd, yyyy MM dd, yyyyMMdd, DD MM, DD). For example: If you type Jan 1, the date picker assumes the current year. If you type 17, it assumes the 17th of the current month and year. For the input 5/25, it assumes month/day of the current year. For the input Mar 86, it assumes 1/3/1986. This configuration option supports the same formats as the Java™ SimpleDateFormat, and applies only when a browser does not have a native date time picker.	String
Week start	The day that starts each week. The default value is Sunday.	DatePickerWeekStart
Disabled week days	One or more days of the week that are blocked out on the calendar. By default, no days are disabled.	DatePickerDisabledWeekDays
Show Today button	Show or hide the Today button, which sets the date to today's date. By default, the button is not displayed.	Boolean
Show Clear button	Show or hide the Clear button, which clears the date value. By default, the button is not displayed.	Boolean
Orientation	The orientation of the calendar when it is clicked.	DatePickerOrientation
Color style	The color style of the date time picker. The colors correspond to variables in the specified theme. The default value is Default (dark blue).	DatePickerColorStyle
Show week number	For Gregorian calendars, displays the number of the week in the year. For example, the last week in a Gregorian year is week number 52. By default, no week number is shown.	Boolean
Highlight today	Specifies whether today's date is highlighted in the calendar. By default, today's date is not highlighted.	Boolean
Hide header	Hides the header at the top of the custom date and time picker. By default, the header is not hidden.	Boolean
Show calendar icon	Displays the calendar icon in the text input box.	Boolean
Year selector style	The style of the year selector, Default or Modern.	tableHFStyle

Example

If you want to have a clickable calendar button, you can place a Date/time picker view inside of an Input Group view. In the properties for the Input Group view, set the Button type property to Icon and set the Button info property to calendar. In the On button click event for the Input Group view, type the following string:

${Control_ID}._instance.pickerControl.show();

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events. Date/time picker has the following types of event handlers:

• On load: Activated when the page loads. For example:

  var workerStart = ${StartDate}.getDate(); me.setStart(workerStart);

• On change: Activated when a change is detected. For example:

  return confirm("Are you sure you want to change date?")

• On day cell render: Activated when there is a day cell render. It is triggered before the date shows on the date time picker. For example:

  me.setDate("01/01/2015")

Depending on the specific event, you can use JavaScript logic to modify the effects of the view. More information on using events with views is found in the topic User-defined events.

Methods

For detailed information on the available methods for Date/time picker, see the Date/time picker JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.