Crayons

# 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

← Drag Container (fw-drag-container) →