Date Picker
Introduction
A date picker is used to display and, optionally, allow the end-user to edit the value of an attribute of data type Date and Time. It uses the values set in the Languages tab of App Settings to display a correctly localized value to the end-user, using the Language object associated with the end-user.
A date picker must be placed in a data container and displays an attribute of the object (or objects) retrieved by that container. The name of the attribute to be displayed is shown inside the date picker, between square brackets, and colored blue.
For example, the following date picker allows the end-user to see, and set, the LastContacted date of a customer.
Properties Pane
The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Date picker properties consist of the following sections:
Properties:
Styling:
Properties
General Section
Date Format
The date format determines whether the date picker displays the attribute values as a date, time, date and time, or in a custom format.
The format chosen here does not affect how data is stored; in all cases both a date and a time will be recorded. It merely affects how the data is displayed. The date and/or time formats also depend on the localization (language) of the end-user viewing the data.
The possible values for date format are shown below:
- Date (default)
- Time
- Date and time
- Custom (see below for more details)
Custom Date Format
If you choose Custom as the date format (see above), this property determines how the attribute value is formatted. The custom date format is a string that allows for any combination of symbols found in the table below. Any punctuation will be rendered literally.
When using yyyy custom format and typing yy in the date picker widget, the century guessing by proximity follows the rule of 50/50. Specifically, it adjusts dates to be within 50 years before and 50 years after the time the date format instance is created:
242024751975
All examples are for 30th December 2014, at 00:27:16.789
| Symbol | Example | Description |
|---|---|---|
G |
AD | The era |
y, yyy, yyyy, etc. |
2014 | Year |
yy |
14 | Year |
Y, YYY, YYYY, etc. |
2015 | Week year, use in combination with w for week number formatting |
YY |
15 | Week year, use in combination with w for week number formatting |
M, MM* |
12 | Month number |
MMM |
Dec | Month abbreviation |
MMMM |
December | Month name |
w, ww* |
1 | Week of year, use for week number formatting |
d, dd* |
30 | Day of month |
D, DD, DDD |
364 | Day of year |
a |
AM | AM or PM |
h, hh* |
12 | Hour (1-12) |
H, HH* |
00 | Hour (0-23) |
k, kk* |
24 | Hour (1-24) |
K, KK* |
00 | Hour (0-11) |
m, mm* |
27 | Minute |
s, ss* |
16 | Second |
S, SS, SSS |
789 | Milliseconds |
E, EE |
05 | Day of week number |
EEE |
Tue | Day of week abbreviation |
EEEE |
Tuesday | Day of week name |
X |
08:00 | Time zone parsed |
Z, ZZ, ZZZ |
-04:00 | Time zone offset |
ZZZZ |
GMT-04:00 | Time zone offset and standard |
*Two characters pads with zero
These are some examples:
| Format | Example Output |
|---|---|
EEEE d MMMM yyy G, h:mm a ss's' |
Tuesday 30 December 2014 AD, 12:27 AM 16s |
h:mm a |
12:27 AM |
yyy D KK:mm |
2014 364 00:27 |
EEEE MMMM d yyy |
Tuesday December 30 2014 |
EEE, MMM dd, ''yy |
Tue, Dec 30, ‘14 |
EEEE, 'week' ww YYYY |
Tuesday, week 01 2015 |
y-yyyy], month [M-MMMM], and day of month [d-dd] tokens are all present in the custom format).
Placeholder Text
The placeholder text is shown if the date attribute is empty. It can be used to give the end-user a hint as to the expected format.
Data Source Section
This selects which attribute will be used within the widget. You can only select attributes which have the correct data type(s).
For more information on selecting a data source, see the Data Source Section section in Properties Common in the Page Editor.
Label Section
A label describes the purpose of a widget to the end-user.
For more information on properties of this section, see the Label Section section in Properties Common in the Page Editor.
Editability Section
Editability determines whether an end-user can change the value in an input widget.
For more information on properties of this section, see the Editability Section section of Properties Common in the Page Editor.
Visibility Section
Visibility determines whether a widget is displayed to the end-user as part of the page.
For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.
Validation Section
Here, you can specify predefined or custom validation which must be applied to the widget value before the data can be used. You can also customize the message which the end-user will get if the data does not pass the validation.
For more information on input widget validation, see the Validation section of Properties Common in the Page Editor.
Accessibility Section
Aria Required
In a text area widget, when Aria required is set to Yes then assistive technologies will read out the field that is required. When set to No then assistive technologies will not read the field out.
Common Section
Events Section
On Change
The on-change property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget, after the value has been changed.
On Enter
The on-enter property specifies an action that will be executed when the widget is entered, either by using the Tab key or by clicking it with the mouse.
On Leave
The on-leave property specifies an action that will be executed when leaving the widget, either by using the Tab key or by clicking another widget.
This differs from the On change property in that the event will always be triggered, even if the value has not been changed.