Date Picker

Last modified: September 23, 2026

Introduction

A date picker is used to display and, optionally, allow the end-user to edit the value of an attribute or a variable 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 within a data context to display or edit the intended value:

The name of the configured value is shown inside the date picker widget, 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 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 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.

Custom date formats, as well as date handling in general, are tricky technologies with real business ramifications. Be aware of the following behaviors when using this widget:

  • When the custom date format uses yyyy, the date picker also accepts a two-digit year (yy).
  • The date picker uses a reference date for parsing partial date inputs (for example mm/dd or yy/mm/dd) into complete date inputs yyyy/mm/dd. The reference date is the date from the value already in the field. If the field is empty, the current date is the reference date.
  • For two-digit year input, the date picker chooses the century that places the entered year closest to the reference year. If two years are equally close, it chooses the earlier year.
    • For example, with 2026 as the reference year (if the field previously contained a date in 1970, entering 24 results in 1924):
      • 24 2024
      • 75 2075
      • 76 1976
      • 97 1997
  • Even though a date picker with a custom date format is editable, the calendar drop-down button will only be shown if the custom format represents a full date (that is, the year [y–yyyy], month [M–MMMM], and day of month [d–dd] tokens are all present in the custom format).

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 ISO week-numbering year, four digits:
YYYY shows the year based on the ISO week the date falls in, where week 1 is the first week containing at least four days of the new year. For example, 2014-12-31 is in ISO week 1 of 2015, so YYYY returns 2015, while yyyy returns 2014.
YY 15 ISO week-numbering year, two digits:
YY shows the year based on the ISO week the date falls in, where week 1 is the first week containing at least four days of the new year. For example, 2014-12-31 is in ISO week 1 of 15, so YY returns 15, while yy returns 14.
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

Placeholder Text

The placeholder text is shown if the date value is empty. It can be used to give the end-user a hint as to the expected format.

Data Source Section

This selects which value will be used within the widget. You can only select values 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

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

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.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

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.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

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.

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

Styling

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

Read More