# Datepicker (fw-datepicker)
fw-datepicker displays an input box with a calendar that enables selecting a date or date range. The values preselected in the input box and calendar are based on the fw-datepicker attribute values.
All the date formats passed as attribute's values must be valid ISO Date format (opens new window).
# Demo
Show Code
# Usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
cancelText | cancel-text | string | '' | |
clearInput | clear-input | Displays a clear icon in the text box. Clicking the icon clears the value. Default false | boolean | false |
displayFormat | display-format | Format in which the date values selected in the calendar are populated in the input box. Defaults to the locale specific display format. | string | undefined |
errorText | error-text | Error text displayed below the text box. | string | '' |
fromDate | from-date | Starting date of the date range that is preselected in the calendar, if mode is range. Must be a date later than the min-date value and valid ISO date format. | string | undefined |
hintText | hint-text | Hint text displayed below the text box. | string | '' |
label | label | Label displayed on the interface, for the component. | string | '' |
locale | locale | Locale for which datepicker needs to be shown. Defaults to browser's current locale. | string | undefined |
maxDate | max-date | Latest date a user can select in the calendar, if mode is range. Must be a valid ISO date format if set. | string | undefined |
maxYear | max-year | Maximum year that needs to be displayed in the year dropdown. | number | new Date().getFullYear() |
minDate | min-date | Earliest date a user can select in the calendar, if mode is range. Must be a valid ISO date format if set. | string | undefined |
minYear | min-year | Minimum year that needs to be displayed in the year dropdown. | number | 1970 |
mode | mode | Type of date selection enabled for the calendar. If the value is range, a user can select a date range in the calendar. | "range" \| "single date" | 'single date' |
name | name | Name of the component, saved as part of form data. | string | '' |
placeholder | placeholder | Text displayed in the input box before a user selects a date or date range. | string | undefined |
readonly | readonly | Make the input box as readonly. Default false | boolean | false |
required | required | Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false. | boolean | false |
showFooter | show-footer | Indicates if footer needs to be shown. Default true . | boolean | true |
state | state | Theme based on which the input of the datepicker is styled. | "error" \| "normal" \| "warning" | 'normal' |
toDate | to-date | Ending date of the date range that is preselected in the calendar, if mode is range. Must be a date earlier than the max-date value and valid ISO date format. | string | undefined |
updateText | update-text | string | '' | |
value | value | Date that is preselected in the calendar, if mode is single date or undefined. If set this must be valid ISO date format. | string | undefined |
warningText | warning-text | Warning text displayed below the text box. | string | '' |
# Events
Event | Description | Type |
---|---|---|
fwBlur | Triggered when the input box loses focus. | CustomEvent<any> |
fwChange | Triggered when the update button clicked | CustomEvent<any> |
# Methods
# clearValue() => Promise<void>
Clears the input value and unselects selected date.
# Returns
Type: Promise<void>
# getValue() => Promise<string | { fromDate: string; toDate: string; }>
Returns the date value in ISO format.
# Returns
Type: Promise<string | { fromDate: string; toDate: string; }>
# setFocus() => Promise<void>
Sets focus on a specific fw-datepicker
. Use this method instead of the global input.focus()
.
# Returns
Type: Promise<void>
# CSS Custom Properties
Name | Description |
---|---|
--fw-error-color | Color of the error text. |
--fw-hint-color | Color of the hint text. |
--fw-label-color | Color of the label. |
--fw-warning-color | Color of the warning text. |
# Dependencies
# Used by
# Depends on
# Graph
graph TD;
fw-datepicker --> fw-select-option
fw-datepicker --> fw-button
fw-datepicker --> fw-popover
fw-datepicker --> fw-input
fw-datepicker --> fw-icon
fw-datepicker --> fw-select
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-icon --> fw-toast-message
fw-toast-message --> fw-spinner
fw-toast-message --> fw-icon
fw-checkbox --> fw-icon
fw-button --> fw-spinner
fw-button --> fw-icon
fw-input --> fw-icon
fw-select --> fw-tag
fw-select --> fw-popover
fw-select --> fw-button
fw-select --> fw-spinner
fw-select --> fw-icon
fw-select --> fw-list-options
fw-tag --> fw-avatar
fw-tag --> fw-icon
fw-list-options --> fw-select-option
fw-list-options --> fw-input
fw-form-control --> fw-datepicker
style fw-datepicker fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks