# 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

Last Updated: 2/3/2021, 7:20:44 PM