# 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.
# Usage
Show Code
# Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dateFormat | date-format | Format in which the date values selected in the calendar are populated in the input box and saved when the form data is saved. | string | 'DD-MM-YYYY' |
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. | string | undefined |
maxDate | max-date | Latest date a user can select in the calendar, if mode is range. | string | undefined |
minDate | min-date | Earliest date a user can select in the calendar, if mode is range. | string | undefined |
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" or "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 |
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. | string | undefined |
value | value | Date that is preselected in the calendar, if mode is single date or undefined. | string | undefined |
# Events
| Event | Description | Type |
|---|---|---|
fwChange | Triggered when the update button clicked | CustomEvent<any> |
# Dependencies
# Depends on
# Graph
graph TD;
fw-datepicker --> fw-input
fw-datepicker --> fw-select
fw-datepicker --> fw-select-option
fw-datepicker --> fw-button
fw-input --> fw-icon
fw-select --> fw-tag
fw-select --> fw-select-option
style fw-datepicker fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks