Time Picker (time_picker)
A time picker helps users select a specific time.
đź”— External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| data_filter | data-filter | The time picker will use this regular expression to filter the time picker options. You are declaring a case insensitive match over the entire option text, which means ^ and $ are added automatically. You can specify the inputted query with {{query}}. You can also declare a custom query filter as a data property as well, which can be used in the custom filter (data-number-filter="[0-9]" and then using data-filter="{{numberFilter}}.*"). The default filter is .*{{query}}.*, which is a simple “find anywhere within the option” text. |
|
| min_date | data-min-date | The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default. |
|
| max_date | data-max-date | The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in a later date will cause native form validation error. There is no default maximum date. |
|
| data_step | data-step | The number of minutes between options. The minimum is 1 minute and the default is 30 minutes. |
|
| hint | Hint | Hint for input into date field |
|
| disabled | Disabled | The date picker component will be disabled/readonly. You can re-enable by executing the enable procedure on the component. |
|
| default_value | Default value | The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD. |
|
id: time_picker
label: 'Time Picker'
description: 'A time picker helps users select a specific time.'
group: Forms
homepage: 'https://designsystem.digital.gov/components/time-picker/'
props:
data_filter:
id: data_filter
label: data-filter
description: 'The time picker will use this regular expression to filter the time picker options. You are declaring a case insensitive match over the entire option text, which means ^ and $ are added automatically. You can specify the inputted query with {{query}}. You can also declare a custom query filter as a data property as well, which can be used in the custom filter (data-number-filter="[0-9]" and then using data-filter="{{numberFilter}}.*"). The default filter is .*{{query}}.*, which is a simple “find anywhere within the option” text.'
schema:
type: string
min_date:
id: min_date
label: data-min-date
description: 'The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default.'
schema:
type: string
max_date:
id: max_date
label: data-max-date
description: 'The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in a later date will cause native form validation error. There is no default maximum date.'
schema:
type: string
data_step:
id: data_step
label: data-step
description: 'The number of minutes between options. The minimum is 1 minute and the default is 30 minutes.'
schema:
type: string
hint:
id: hint
label: Hint
description: 'Hint for input into date field'
schema:
type: string
disabled:
id: disabled
label: Disabled
description: 'The date picker component will be disabled/readonly. You can re-enable by executing the enable procedure on the component.'
schema:
type: boolean
default_value:
id: default_value
label: 'Default value'
description: 'The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD.'
schema:
type: string
examples:
preview:
id: preview
label: Preview
renderable:
'@component': time_picker
data_filter: '[0-9]'
min_date: '0000-01-01'
data_step: '15'
hint: mm/dd/yyyy
mm/dd/yyyy