Intl DatepickerWeb Component0.4.2

Their calendar.
Your date value.

Let people choose dates in a calendar they know. A Web Component for single dates, ranges and more—with localized controls and values your application can use.

Try the datepicker Read the docs

March 202621Gregorian

فروردین ۱۴۰۵۱شمسی

2026-03-21

npm install intl-datepicker

A REAL COMPONENT, RIGHT HERE

Change the calendar. Keep the day.

Live in your browser

Loading the calendar…

Pick a day. Try the arrow keys, too.

What your application receives

2026-03-21

Choose a day to see its display value.

A date, without a time zone.

For a single day, value is always a Gregorian YYYY-MM-DD string. Changing the calendar changes how that day is shown, not the day you selected.

Inspect getValue()

Waiting for the component…

Use this configuration

This is intl-datepicker 0.4.2, running locally in your browser. Your selections are not sent to a server.

FROM A CALENDAR TO A FORM

Let the rules do their job.

A booking range with unavailable nights, a minimum stay, and a real form value. Open the field and try a different stay.

Stay length2–7 nights
Sample booking windowOctober 2026
Unavailable nightsOctober 16–18

Checkout is allowed on the first unavailable day. The example uses fixed dates and local data; it does not make a reservation.

Explore range rules

A few days away

Sample booking form

FormData

Submit the sample to read FormData.

See the form markup

<form>
  <label for="stay">Your stay</label>
  <intl-datepicker id="stay" name="stay"
    type="range" calendar="gregory" locale="en-GB"
    min="2026-10-01" max="2026-10-31"
    min-nights="2" max-nights="7"
    exclude-disabled="nights"
    disabled-dates='["2026-10-16/2026-10-18"]'
    required
  ></intl-datepicker>
  <button type="submit">Check selection</button>
</form>

Uses the same core, calendar and label imports as the first demo. The page prevents submission and reads new FormData(form).

Choose the shape of the answer.

Single date, range, week, multiple dates, month or year. Six picker types for different forms.

Picker types and values

More than a mouse interaction.

Keyboard navigation, labelled calendar grids and selection announcements are built into the component.

Keyboard guide

A calendar and a locale are separate choices.

Choose the calendar, display locale and digits. English labels ship by default; Persian, Arabic and Hebrew labels are optional imports.

Localization guide

JUST A WEB COMPONENT

Keep your stack.

Use the custom element in plain HTML or your framework. Style it with CSS properties and shadow parts. Import additional calendars only when you need them.

React Vue 3 Svelte Angular

What exactly should I store?

For single dates, keep the date-only ISO string. Ranges contain start/end strings; month and year values in other calendars can include a calendar annotation. Read the value contract for the picker type you use.

Value formats

Does it render on the server?

The package is safe to import in an SSR environment, but the calendar renders in the browser. On this page, the demo code loads when a demo approaches the viewport; additional calendars load when selected.

A familiar way to pick a date.

Start with one calendar, then add the options your form needs. Version 0.4.2 is pre-1.0; review the changelog before minor-version upgrades.

Start building GitHub

Element: <intl-datepicker>
License: MIT
Release: 0.4.2
Framework required: None