Datepicker

<wa-datepicker>

Stable

added

Datepickers let users enter or choose dates, date ranges, weeks, and date/time values.

Datepicker extends the current Web Awesome Input and adds a Flatpickr calendar.

<wa-datepicker label="Start date" name="start-date"></wa-datepicker>

Examples

Link to This Section

Date range

Link to This Section

Use mode="range" for a start and end date. Set additional-name to submit each endpoint separately.

<wa-datepicker
  label="Reporting period"
  mode="range"
  name="period[from]"
  additional-name="period[to]"
  value="2025-07-21 to 2025-07-26"
></wa-datepicker>

Week selection

Link to This Section

<wa-datepicker label="Week" name="week[from]" additional-name="week[to]" week-select></wa-datepicker>

Date and time

Link to This Section

Flatpickr formatting tokens control the submitted and visible representations.

<wa-datepicker
  label="Appointment"
  name="appointment"
  enable-time
  date-format="Y-m-d H:i"
  alt-format="F j, Y | H:i"
></wa-datepicker>

German locale

Link to This Section

<wa-datepicker label="Datum" name="date" locale="de"></wa-datepicker>

Clearable

Link to This Section

Use the current Web Awesome Input interface to add a clear action.

<wa-datepicker label="Optional date" name="date" with-clear></wa-datepicker>

Events

Link to This Section

Datepicker emits native form events and Web Awesome lifecycle events.

const picker = document.querySelector('wa-datepicker');

picker.addEventListener('change', event => {
  console.log(event.currentTarget.value);
});

picker.addEventListener('wa-show', () => console.log('Calendar opened'));
picker.addEventListener('wa-hide', () => console.log('Calendar closed'));

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/datepicker/datepicker.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/datepicker/datepicker.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/datepicker/datepicker.js';

To import this component for React 18 or below, use the following code:

import WaDatepicker from '@yoummday/webawesome/dist/react/datepicker/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
`clear-icon`	An icon to use in lieu of the default clear icon.
`end`	An element placed at the end of the input control.
`hide-password-icon`	An icon to use in lieu of the default hide password icon.
`hint`	Text that describes how to use the datepicker. Alternatively, use the `hint` attribute.
`label`	The datepicker's label. Alternatively, use the `label` attribute.
`show-password-icon`	An icon to use in lieu of the default show password icon.
`start`	An element placed at the start of the input control.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`additionalName` `additional-name`	A second form field name used for the end value in range and week modes. Type `string` Default `''`
`allowInput` `allow-input`	Allows direct text entry in the visible input. Type `boolean` Default `true`
`altFormat` `alt-format`	The format shown in the visible input. Uses Flatpickr formatting tokens. Type `string` Default `'F j, Y'`
`appearance` `appearance`	The input's visual appearance. Type `'filled' \| 'outlined' \| 'filled-outlined'` Default `'outlined'`
`ariaDateFormat` `aria-date-format`	The accessible date format announced for calendar days. Type `string` Default `'F j, Y'`
`autocapitalize` `autocapitalize`	Controls whether and how text input is automatically capitalized as it is entered by the user. Type `'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'`
`autocomplete` `autocomplete`	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values. Type `string`
`autocorrect` `autocorrect`	Indicates whether the browser's autocorrect feature is on or off. When set as an attribute, use `"off"` or `"on"`. When set as a property, use `true` or `false`. Type `boolean`
`autofocus` `autofocus`	Indicates that the input should receive focus on page load. Type `boolean`
`dateFormat` `date-format`	The canonical value format. Uses Flatpickr formatting tokens. Type `string` Default `'Y-m-d'`
`defaultDate`	The initially selected date or dates. Type `DateOption \| DateOption[] \| undefined`
`defaultHour` `default-hour`	Initial hour shown by the time picker. Type `number` Default `12`
`defaultMinute` `default-minute`	Initial minute shown by the time picker. Type `number` Default `0`
`defaultToToday` `default-to-today`	Selects today when no other default or value is provided. Type `boolean` Default `false`
`defaultValue` `value`	The default value of the form control. Primarily used for resetting the form control. Type `string \| null`
`disabled` `disabled`	Disables the form control. Type `boolean` Default `false`
`disableDates`	Dates that cannot be selected. Set as a JavaScript property. Type `DateLimit<DateOption>[]` Default `[]`
`disableMobile` `disable-mobile`	Always uses Flatpickr instead of a platform-native mobile picker. Type `boolean` Default `false`
`enableDates`	Dates that can be selected. Set as a JavaScript property. Type `DateLimit<DateOption>[] \| undefined`
`enableSeconds` `enable-seconds`	Enables seconds in the time picker. Type `boolean` Default `false`
`enableTime` `enable-time`	Enables time selection alongside the date. Type `boolean` Default `false`
`enterkeyhint` `enterkeyhint`	Used to customize the label or icon of the Enter key on virtual keyboards. Type `'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`
`firstDayOfWeek` `first-day-of-week`	First day of the week, where Sunday is `0`. Type `number` Default `1`
`form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work. Type `HTMLFormElement \| null`
`formatDateFn`	Custom date formatter. Set as a JavaScript property. Type `(date: Date, format: string, locale: Locale) => string \| undefined`
`hint` `hint`	The input's hint. If you need to display HTML, use the `hint` slot instead. Type `string` Default `''`
`hourIncrement` `hour-increment`	Hour input step. Type `number` Default `1`
`inline` `inline`	Displays the calendar inline. Type `boolean` Default `false`
`inputmode` `inputmode`	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. Type `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`
`label` `label`	The input's label. If you need to display HTML, use the `label` slot instead. Type `string` Default `''`
`locale` `locale`	Flatpickr locale identifier. `default` and `de` are bundled. Type `string` Default `'default'`
`max` `max`	The input's maximum value. Only applies to date and number input types. Type `number \| string`
`maxlength` `maxlength`	The maximum length of input that will be considered valid. Type `number`
`min` `min`	The input's minimum value. Only applies to date and number input types. Type `number \| string`
`minlength` `minlength`	The minimum length of input that will be considered valid. Type `number`
`minuteIncrement` `minute-increment`	Minute input step. Type `number` Default `5`
`mode` `mode`	Selection mode. `time` is a convenience alias for a time-only picker. Type `'single' \| 'multiple' \| 'range' \| 'time'` Default `'single'`
`name` `name`	The name of the input, submitted as a name/value pair with form data. Type `string \| null` Default `null`
`noCalendar` `no-calendar`	Hides the calendar grid. Typically combined with `enable-time`. Type `boolean` Default `false`
`onChange`	Flatpickr change hook. Set as a JavaScript property. Type `Hook \| undefined`
`onClose`	Flatpickr close hook. Set as a JavaScript property. Type `Hook \| undefined`
`onMonthChange`	Flatpickr month-change hook. Set as a JavaScript property. Type `Hook \| undefined`
`onOpen`	Flatpickr open hook. Set as a JavaScript property. Type `Hook \| undefined`
`onReady`	Flatpickr ready hook. Set as a JavaScript property. Type `Hook \| undefined`
`onValueUpdate`	Flatpickr value-update hook. Set as a JavaScript property. Type `Hook \| undefined`
`onYearChange`	Flatpickr year-change hook. Set as a JavaScript property. Type `Hook \| undefined`
`passwordToggle` `password-toggle`	Adds a button to toggle the password's visibility. Only applies to password types. Type `boolean` Default `false`
`passwordVisible` `password-visible`	Determines whether or not the password is currently visible. Only applies to password input types. Type `boolean` Default `false`
`pattern` `pattern`	A regular expression pattern to validate input against. Type `string`
`pill` `pill`	Draws a pill-style input with rounded edges. Type `boolean` Default `false`
`placeholder` `placeholder`	Placeholder text to show as a hint when the input is empty. Type `string` Default `''`
`position` `position`	Preferred calendar placement. Type `'above' \| 'below'` Default `'below'`
`readonly` `readonly`	Makes the input readonly. Type `boolean` Default `false`
`required` `required`	Makes the input a required field. Type `boolean` Default `false`
`shorthandCurrentMonth` `shorthand-current-month`	Uses abbreviated month names in the calendar heading. Type `boolean` Default `false`
`showMonths` `show-months`	Number of months displayed together. Type `number` Default `1`
`size` `size`	The input's size. Type `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'small' \| 'medium' \| 'large'` Default `'m'`
`spellcheck` `spellcheck`	Enables spell checking on the input. Type `boolean` Default `true`
`step` `step`	Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types. Type `number \| 'any'` Default `'any'`
`time24hr` `time-24hr`	Uses a 24-hour time control. Type `boolean` Default `true`
`type` `type`	The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`. Type `'date' \| 'datetime-local' \| 'email' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'time' \| 'url'` Default `'text'`
`validationTarget`	Override this to change where constraint validation popups are anchored. Type `undefined \| HTMLElement`
`validators`	Validators are static because they have `observedAttributes`, essentially attributes to "watch" for changes. Whenever these attributes change, we want to be notified and update the validator. Type `Validator[]` Default `[]`
`value`	The current value of the input, submitted as a name/value pair with form data.
`weekNumbers` `week-numbers`	Shows week numbers in the calendar. Type `boolean` Default `true`
`weekSelect` `week-select`	Selects an entire week and stores its start and end dates. Type `boolean` Default `false`
`withClear` `with-clear`	Adds a clear button when the input is not empty. Type `boolean` Default `false`
`withHint` `with-hint`	Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup includes the hint before the component hydrates on the client. Type `boolean` Default `false`
`withLabel` `with-label`	Only required for SSR. Set to `true` if you're slotting in a `label` element so the server-rendered markup includes the label before the component hydrates on the client. Type `boolean` Default `false`
`withoutSpinButtons` `without-spin-buttons`	Hides the browser's built-in increment/decrement spin buttons for number inputs. Type `boolean` Default `true`

Methods

Link to This Section

Learn more about methods.

Name	Description	Arguments
`blur()`	Removes focus from the input.
`focus()`	Sets focus on the input.	`options: FocusOptions`
`formStateRestoreCallback()`	Called when the browser is trying to restore element’s state to state in which case reason is "restore", or when the browser is trying to fulfill autofill on behalf of user in which case reason is "autocomplete". In the case of "restore", state is a string, File, or FormData object previously set as the second argument to setFormValue.	`state: string \| File \| FormData \| null, reason: 'autocomplete' \| 'restore'`
`resetValidity()`	Reset validity is a way of removing manual custom errors and native validation.
`select()`	Selects all the text in the input.
`setCustomValidity()`	Do not use this when creating a "Validator". This is intended for end users of components. We track manually defined custom errors so we don't clear them on accident in our validators.	`message: string`
`setRangeText()`	Replaces a range of text with a new string.	`replacement: string, start: number, end: number, selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`
`setSelectionRange()`	Sets the start and end positions of the text selection (0-based).	`selectionStart: number, selectionEnd: number, selectionDirection: 'forward' \| 'backward' \| 'none'`
`showPicker()`	Displays the browser picker for an input element (only works if the browser supports it for the input type).
`stepDown()`	Decrements the value of a numeric input type by the value of the step attribute.
`stepUp()`	Increments the value of a numeric input type by the value of the step attribute.

Events

Link to This Section

Learn more about events.

Name	Description
`blur`	Emitted when the control loses focus.
`change`	Emitted when the selected value is committed.
`focus`	Emitted when the control gains focus.
`input`	Emitted when the selected value changes.
`wa-clear`	Emitted when the clear button is activated.
`wa-hide`	Emitted when the calendar closes.
`wa-invalid`	Emitted when the form control has been checked for validity and its constraints aren't satisfied.
`wa-show`	Emitted when the calendar opens.

Custom States

Link to This Section

Learn more about custom states.

Name	Description	CSS selector
`blank`	The input is empty.	`:state(blank)`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`alt-input`	The visible date input created by the calendar.	`::part(alt-input)`
`clear-button`	The clear button.	`::part(clear-button)`
`datepicker`	The component's outer input wrapper.	`::part(datepicker)`
`end`	The container that wraps the `end` slot.	`::part(end)`
`form-control-label`	The label.	`::part(form-control-label)`
`hint`	The hint's wrapper.	`::part(hint)`
`input`	The internal `<input>` control.	`::part(input)`
`input-wrapper`	The component's outer wrapper.	`::part(input-wrapper)`
`label`	Deprecated. Use the `form-control-label` part instead.	`::part(label)`
`password-toggle-button`	The password toggle button.	`::part(password-toggle-button)`
`start`	The container that wraps the `start` slot.	`::part(start)`
`base`	Deprecated. Use the `input-wrapper` part instead.	`::part(base)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Need a hand?

Report a bug

Ask for help

Datepicker

Examples

Date range

Week selection

Date and time

German locale

Clearable

Events

API

Importing

Slots

Attributes & Properties

Methods

Events

Custom States

CSS Parts

Dependencies

Quick Links

Recent Searches