Flo.w

# Date Time Picker

<flow-date-time-picker>
Stable

The date/time picker component allows selection of date and times using a popup calendar.

The value property of the component is an ISO8601 date/time string and can be get/set programatically. The display format of the component can be set using the format attribute. See Formatting Tokens below.

WARNING

Due to an outstanding bug, popup calendars will not be positioned correctly if any ancestor element of the date/time picker component is a positioned element (i.e. CSS position property is relative or absolute). Specify the static attribute on the component as a workaround.

# Formatting

Specify a format string using token characters from the tables below. Other non-token characters (such as ':' or '-') may also used in the format string.

# Date Formatting Tokens

Token Description Example
d Day of the month, 2 digits with leading zeros 01 to 31
D A textual representation of a day Mon through Sun
l (lowercase 'L') A full textual representation of the day of the week
j Day of the month without leading zeros 1 to 31
J Day of the month without leading zeros and ordinal suffix 1st, 2nd, to 31st
w Numeric representation of the day of the week 0 (for Sunday) through 6 (for Saturday)
W Numeric representation of the week 0 (first week of the year) through 52 (last week of the year)
F A full textual representation of a month January through December
m Numeric representation of a month, with leading zero 01 through 12
n Numeric representation of a month, without leading zeros 1 through 12
M A short textual representation of a month Jan through Dec
U The number of seconds since the Unix Epoch 1413704993
y A two digit representation of a year 99 or 03
Y A full numeric representation of a year, 4 digits 1999 or 2003
Z ISO Date format 2017-03-04T01:23:43.000Z

# Time Formatting Tokens

Token Description Example
H Hours (24 hours) 00 to 23
h Hours 1 to 12
G Hours, 2 digits with leading zeros 1 to 12
i Minutes 00 to 59
S Seconds, 2 digits 00 to 59
s Seconds 0, 1 to 59
K AM/PM AM or PM

# Examples

# Modes

The date/time picker supports date, datetime and time modes.

# Restricting the Date Range

Set the min-date and/or max-date attributes to restrict the selectable date range.

# Properties

Property Description Type Default
border Set to `true` to display a border. boolean true
clockMode
clock-mode		 Specify 12 or 24 hour clock format. "12" | "24" '24'
color The accent color of the popup date/time selector. Colors are taken from the application palette. "danger" | "gray" | "primary" | "secondary" | "success" | "warning"
enableSeconds
enable-seconds		 Set to `true` to enable seconds in the display. boolean false
format The display format for the selected date/time. string 'YYYY-MM-DD'
maxDate
max-date		 The maximum date/time that can be selected (ISO8601 string or Date object). Date | string null
minDate
min-date		 The minimum date/time that can be selected (ISO8601 string or Date object). Date | string null
minuteIncrement
minute-increment		 Adjusts the step for the minute input. number 1
mode The date/time mode. "date" | "datetime" | "time" 'date'
openOnClick
open-on-click		 Set to `true` to open the date/time picker on mouse click. boolean true
placeholder The input placeholder. string
position The position of the popup date/time selector. "above" | "auto" | "below" 'auto'
static Set to `true` to enable static positioning of popup calendars. By default calendars are positioned absolutely using body coordinates. boolean false
utc Set display mode to UTC (default is local time) boolean false
value The value of the picker. ISO8601 string string null

# Events

Event Description Type
flowChange

Emitted when the selected date/time is changed by user interaction.

 DateTimePickerChangeEventDetail
flowDateTimeOpened

Emitted when the popup date/time selector is opened.

 void

# Methods

Method Description
close close() => Promise<void>

Close the date/time picker

open open() => Promise<void>

Open the date/time picker

# CSS Custom Properties

Name Description
--accent-color The accent color of the popup date/time selector. (Default: primary)
--accent-contrast The accent contrast color of the popup date/time selector. (Default: primary contrast)
--background-color The background color of the date/time picker. (Default: background)
--border-color The border color of the date/time picker. (Default: color-step 200)
--color The color of the date/time picker. (Default: text)

← Dialog →