Date Range Picker

Select a range of dates in a calendar.

(Not a complete list)
Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

Features

  • Full keyboard navigation
  • Localization support
  • Can be controlled or uncontrolled
  • Focus is fully managed
  • Supports both date and date-time formats

Overview

The Date Range Picker is a combination of the Date Range Field , Range Calendar , and Popover . It's fully accessible, and works with all modern browsers & devices.

Before jumping into the docs for this builder, it's recommended that you understand how we work with dates & times in Melt, which you can read about here . Additionally, since this builder simply combines other builders, it's recommended that you read the docs for those builders as well.

Anatomy

  • Field: The element which contains the date segments
  • Start Segment: An individual segment of the start date (day, month, year, etc.)
  • End Segment: An individual segment of the end date (day, month, year, etc.)
  • Label: The label for the date field
  • Start Hidden Input: A hidden input element containing the ISO 8601 formatted string of the start date
  • End Hidden Input: A hidden input element containing the ISO 8601 formatted string of the end date
  • Validation: The container for the validation message
  • Calendar: The container of the months and days of the calendar
  • Cell: A single date in the calendar
  • Grid: A month in the calendar
  • Previous Button: A button for navigating to the previous page of the calendar
  • Next Button: A button for navigating to the next page of the calendar
  • Heading: A visual heading for the calendar
  • Trigger: The button which opens/closes the popover.
  • Content: Contains the content within the popover
  • Arrow: An optional arrow component

Scaffold a Date Range Picker

This section is designed to help you get started with the correct markup for a Date Range Picker. Since it's a combination of three other builders, there are a lot of working parts. This section will help you understand how to bring them all together, though it's highly recommended you read the docs for the Date Field , Calendar , and Popover builders as well.

Let's start by initializing our Date Range Picker using the createDateRangePicker function and destructuring the pieces we need:

    <script lang="ts">
  import { createDateRangePicker } from '@melt-ui/svelte'
  const {
    elements: {
      calendar,
      cell,
      content,
      field,
      grid,
      heading,
      label,
      nextButton,
      prevButton,
      startSegment,
      endSegment,
      trigger
    },
    states: { months, headingValue, weekdays, segmentContents },
    helpers: { isDateDisabled, isDateUnavailable }
  } = createDateRangePicker()
</script>
	
    <script lang="ts">
  import { createDateRangePicker } from '@melt-ui/svelte'
  const {
    elements: {
      calendar,
      cell,
      content,
      field,
      grid,
      heading,
      label,
      nextButton,
      prevButton,
      startSegment,
      endSegment,
      trigger
    },
    states: { months, headingValue, weekdays, segmentContents },
    helpers: { isDateDisabled, isDateUnavailable }
  } = createDateRangePicker()
</script>

Next, we can setup our field. Notice that in addition to the segments that we normally add to a Date Range Field , we also add a trigger button for the Popover .

    <span use:melt={$label}>Hotel Nights</span>
<div use:melt={$field}>
  {#each $segmentContents.start as seg}
    <div use:melt={$startSegment(seg.part)}>
      {seg.value}
    </div>
  {/each}
  <div aria-hidden="true">-</div>
  {#each $segmentContents.end as seg}
    <div use:melt={$endSegment(seg.part)}>
      {seg.value}
    </div>
  {/each}
  <div>
    <button use:melt={$trigger}>
      <span>Open Calendar</span>
    </button>
  </div>
</div>
	
    <span {...$label} use:label>Hotel Nights</span>
<div {...$field} use:field>
  {#each $segmentContents.start as seg}
    <div {...$startSegment(seg.part)} use:startSegment>
      {seg.value}
    </div>
  {/each}
  <div aria-hidden="true">-</div>
  {#each $segmentContents.end as seg}
    <div {...$endSegment(seg.part)} use:endSegment>
      {seg.value}
    </div>
  {/each}
  <div>
    <button {...$trigger} use:trigger>
      <span>Open Calendar</span>
    </button>
  </div>
</div>

Once that's in place, we can setup our calendar, which will be contained within the Popover 's content.

    <span use:melt={$label}>Hotel Nights</span>
<div use:melt={$field}>
  {#each $segmentContents.start as seg}
    <div use:melt={$startSegment(seg.part)}>
      {seg.value}
    </div>
  {/each}
  <div aria-hidden="true">-</div>
  {#each $segmentContents.end as seg}
    <div use:melt={$endSegment(seg.part)}>
      {seg.value}
    </div>
  {/each}
  <div>
    <button use:melt={$trigger}>
      <span>Open Calendar</span>
    </button>
  </div>
</div>
<div use:melt={$content}>
  <div use:melt={$calendar}>
    <header>
      <button use:melt={$prevButton}>
        <span>Previous Month</span>
      </button>
      <div use:melt={$heading}>
        {$headingValue}
      </div>
      <button use:melt={$nextButton}>
        <span>Next Month</span>
      </button>
    </header>
    {#each $months as month}
      <table use:melt={$grid}>
        <thead aria-hidden="true">
          <tr>
            {#each $weekdays as day}
              <th>
                {$day}
              </th>
            {/each}
          </tr>
        </thead>
        <tbody>
          {#each month.weeks as days}
            <tr>
              {#each days as date}
                <td
                  role="gridcell"
                  aria-disabled={$isDateDisabled(date) || $isDateUnavailable(date)}>
                  <div use:melt={$cell(date, month.value)}>
                    {date.day}
                  </div>
                </td>
              {/each}
            </tr>
          {/each}
        </tbody>
      </table>
    {/each}
  </div>
</div>
	
    <span {...$label} use:label>Hotel Nights</span>
<div {...$field} use:field>
  {#each $segmentContents.start as seg}
    <div {...$startSegment(seg.part)} use:startSegment>
      {seg.value}
    </div>
  {/each}
  <div aria-hidden="true">-</div>
  {#each $segmentContents.end as seg}
    <div {...$endSegment(seg.part)} use:endSegment>
      {seg.value}
    </div>
  {/each}
  <div>
    <button {...$trigger} use:trigger>
      <span>Open Calendar</span>
    </button>
  </div>
</div>
<div {...$content} use:content>
  <div {...$calendar} use:calendar>
    <header>
      <button {...$prevButton} use:prevButton>
        <span>Previous Month</span>
      </button>
      <div {...$heading} use:heading>
        {$headingValue}
      </div>
      <button {...$nextButton} use:nextButton>
        <span>Next Month</span>
      </button>
    </header>
    {#each $months as month}
      <table {...$grid} use:grid>
        <thead aria-hidden="true">
          <tr>
            {#each $weekdays as day}
              <th>
                {$day}
              </th>
            {/each}
          </tr>
        </thead>
        <tbody>
          {#each month.weeks as days}
            <tr>
              {#each days as date}
                <td
                  role="gridcell"
                  aria-disabled={$isDateDisabled(date) || $isDateUnavailable(date)}>
                  <div {...$cell(date, month.value)} use:cell>
                    {date.day}
                  </div>
                </td>
              {/each}
            </tr>
          {/each}
        </tbody>
      </table>
    {/each}
  </div>
</div>

And with those pieces in place, we just need to add some styles and we have a fully functional date range picker.

Placeholder

In this section, we'll learn about the placeholder props, which are used to change what type of value the field represents, and what day the calendar displays when no date is selected.

To learn more about how the placeholder affects the different parts of the Date Range Picker, checkout the placeholders docs for the Date Range Field & Range Calendar builders.

Set the Placeholder Date

The Date Range Picker has two placeholder props, placeholder (controlled), and defaultPlaceholder (uncontrolled), which are used to change how the field segments are rendered, and what is first displayed in the calendar when no date is selected.

By default, the placeholder will be set to a CalendarDate object with current date (and no time), but you can override this by passing any DateValue object to the defaultPlaceholder prop.

Below, we'll set the placeholder to a CalendarDateTime object representing February 1st, 2021.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDateTime } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    defaultPlaceholder: new CalendarDateTime(2021, 2, 1)
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDateTime } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    defaultPlaceholder: new CalendarDateTime(2021, 2, 1)
  })
</script>

Although we didn't include a time when instantiating the CalendarDateTime object, the builder is smart enough to know that the Date Range Picker should represent a date and a time, and will render the appropriate segments.

When a time isn't included with a CalendarDateTime object, the time will default to 00:00:00.000 on that date.

Hotel Nights
mm
/
dd
/
yyyy
,
––
:
––
 
AM
mm
/
dd
/
yyyy
,
––
:
––
 
AM

Values

The Date Range Picker has two value props, value (controlled), and defaultValue (uncontrolled), which are used to determine what date the field is populated with, and what day is selected in the calendar popover.

Setting a Default Value

To have a date selected by default, we can use the value (controlled), or defaultValue (uncontrolled) props. If provided, the placeholder props will be set to this value.

The value is a DateRange object, which consists of a start and end property, each of which can be a DateValue object.

    type DateRange = {
  start: DateValue
  end: DateValue
}
	
    type DateRange = {
  start: DateValue
  end: DateValue
}
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDate } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    defaultValue: {
      start: new CalendarDate(2024, 1, 11),
      end: new CalendarDate(2024, 1, 15)
    }
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDate } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    defaultValue: {
      start: new CalendarDate(2024, 1, 11),
      end: new CalendarDate(2024, 1, 15)
    }
  })
</script>
Hotel Nights
1
/
11
/
2024
1
/
15
/
2024

Using the Value Store

The value store returned from the createDateRangePicker function is a writable store containing a DateRange object with a start and end value of whatever type of date was passed via the placeholder or value props.

You can use this value to display the selected date in your markup somewhere, or to perform some action when the value changes.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDate } from '@internationalized/date'
 
  const {
    /* ... */
    states: { value /* ... */ }
  } = createDateRangePicker({
    defaultValue: {
      start: new CalendarDate(2024, 1, 11),
      end: new CalendarDate(2024, 1, 15)
    }
  })
</script>
 
<span>You Selected: {$value.start} - {$value.end}</span>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDate } from '@internationalized/date'
 
  const {
    /* ... */
    states: { value /* ... */ }
  } = createDateRangePicker({
    defaultValue: {
      start: new CalendarDate(2024, 1, 11),
      end: new CalendarDate(2024, 1, 15)
    }
  })
</script>
 
<span>You Selected: {$value.start} - {$value.end}</span>
Date
1
/
11
/
2024
1
/
15
/
2024
Selected: 2024-01-11 - 2024-01-15

Usage with Forms

It's likely that you'll want to use the Date Range Picker in an HTML form, and to do that, you'll want to use the startHiddenInput & endHiddenInput elements that are returned from the createDateRangePicker function.

These elements contain an ISO 8601 string of the value of the field, and is updated whenever the value changes.

If you do plan on using the the hidden inputs, ensure that you set the startName and endName props, as they will be used as the name of the input elements.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
    elements: { startHiddenInput, endHiddenInput /* ... */ }
  } = createDateRangePicker({
    startName: 'checkIn',
    endName: 'checkOut'
  })
</script>
 
<input use:melt={$startHiddenInput} />
<input use:melt={$endHiddenInput} />
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
    elements: { startHiddenInput, endHiddenInput /* ... */ }
  } = createDateRangePicker({
    startName: 'checkIn',
    endName: 'checkOut'
  })
</script>
 
<input {...$startHiddenInput} use:startHiddenInput />
<input {...$endHiddenInput} use:endHiddenInput />

Appearance & Behavior

Fixed Weeks

By default, the calendar will render as many weeks as it needs to display all of the days in that month. However, if you want the calendar to always render the maximum number of weeks (6), you can set the fixedWeeks prop to true.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    fixedWeeks: true
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    fixedWeeks: true
  })
</script>

Now, regardless of the month, the calendar will always render 6 weeks, so there isn't a jump in the UI when navigating between different sized months.

Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

Multiple Months

By default, the calendar will display one month, but you can change this by setting the numberOfMonths prop.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    numberOfMonths: 2
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    numberOfMonths: 2
  })
</script>
Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

Paged Navigation

By default, when the calendar has more than one month, the previous and next buttons will shift the calendar forward or backward by one month. However, you can change this behavior by setting the pagedNavigation prop to true, which will shift the calendar forward or backward by the number of months being displayed.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    numberOfMonths: 2,
    pagedNavigation: true
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    numberOfMonths: 2,
    pagedNavigation: true
  })
</script>
Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

Localization

The Date Range Picker will automatically format the content of the field & calendar according to the locale prop, which defaults to 'en-US', but can be changed to any locale supported by the Intl.DateTimeFormat constructor.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    locale: 'es'
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    locale: 'es'
  })
</script>
Date
dd
/
mm
/
aaaa
dd
/
mm
/
aaaa

Validation

Although possible to implement your own logic using change functions , the Date Range Picker provides a few props that make it a bit easier.

Unavailable Dates

An unavailable date is a date that is not selectable, but is still visible and focusable in the calendar.

You can pass a Matcher function to the isDateUnavailable prop, which will be used to determine if a date is unavailable. The Matcher function is called with a DateValue object, and should return a boolean indicating whether the date is unavailable.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { isWeekend } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    isDateUnavailable: (date) => {
      return isWeekend(date, 'en')
    }
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { isWeekend } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    isDateUnavailable: (date) => {
      return isWeekend(date, 'en')
    }
  })
</script>

The unavailable dates will have the data-unavailable attribute set, which you can use to style differently than the other dates.

Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

Disabled Dates

Disabled dates are not selectable, nor are they focusable in the calendar. Keyboard navigation will skip over them entirely, and should be used for dates that have no meaning in the context of the calendar.

You can pass a Matcher function to the isDateDisabled prop, which will be used to determine if a date is disabled. The Matcher function is called with a DateValue object, and should return a boolean indicating whether the date is disabled.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    isDateDisabled: (date) => {
      return date.day <= 10
    }
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
 
  const {
    /* ... */
  } = createDateRangePicker({
    isDateDisabled: (date) => {
      return date.day <= 10
    }
  })
</script>

In this example, we're disabling the first 10 days of each month.

Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

Minimum & Maximum Values

While the isDateDisabled prop is useful for more complex logic, the Date Range Picker also provides the minValue and maxValue props, which are used to set the min and max selectable dates, which is nice if you're just trying to limit the range of dates that can be selected.

If a date is before the minValue, or after the maxValue, it will be disabled.

    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDate } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    minValue: new CalendarDate(2023, 1, 15),
    maxValue: new CalendarDate(2023, 2, 15)
  })
</script>
	
    <script lang="ts">
  import { createDateRangePicker, melt } from '@melt-ui/svelte'
  import { CalendarDate } from '@internationalized/date'
 
  const {
    /* ... */
  } = createDateRangePicker({
    minValue: new CalendarDate(2023, 1, 15),
    maxValue: new CalendarDate(2023, 2, 15)
  })
</script>
Date
mm
/
dd
/
yyyy
mm
/
dd
/
yyyy

API Reference

createDateRangePicker

The builder function used to create the calendar component.

Props

Prop Default Type / Description
defaultValue -
DateRange | undefined

The default value for the date picker. When provided the placeholder will also assume this value.
value -
Writable<DateRange | undefined>

A writable store than can be used to control the value of the date picker from outside the builder. Useful if you want to sync the value of the date picker with another store used in your app.
onValueChange -
ChangeFn<DateRange | undefined>

A function called when the value of the date picker changes. It receives a single argument, which is an object containing curr and prev properties, whose values are the current and previous values of the value store. Whatever you return from this function will be set as the new value of the value store.
defaultPlaceholder CalendarDate
DateValue

The date that is used when the date picker is empty to determine what point in time the calendar should start at.
placeholder -
Writable<DateValue>

A writable store that can be used to control the placeholder date from outside the builder. When this prop is provided, the defaultPlaceholder prop is ignored, and the value of this store is used instead.
onPlaceholderChange -
ChangeFn<DateValue>

A function called when the placeholder value changes. It receives a single argument, which is an object containing curr and prev properties, whose values are the current and previous values of the placeholder store. Whatever you return from this function will be set as the new value of the placeholder store.
isDateUnavailable -
Matcher | undefined

A function that accepts a date and returns a boolean indicating whether the date is unavailable.
minValue -
DateValue | undefined

The minimum date that can be selected.
maxValue -
DateValue | undefined

The maximum date that can be selected.
disabled false
boolean

Whether the calendar is disabled.
readonly false
boolean

Whether the calendar is readonly.
locale 'en'
string

The locale to use when formatting the date.
pagedNavigation false
boolean

Whether to use paged navigation for the calendar.
weekStartsOn 0
0 | 1 | 2 | 3 | 4 | 5 | 6

The day of the week the calendar starts on. 0 is Sunday, 6 is Saturday, etc.
fixedWeeks false
boolean

Whether to always show 6 weeks in the calendar.
calendarLabel 'Event date'
string

An accessible label for the calendar.
ids -
DateRangePickerIds

Override the default ids used by the various elements within the date picker.

Elements

Element Description

The container of the months and days of the calendar

A visual heading for the calendar

A grid representing a month of the calendar

A cell representing a single date in the calendar

A button which moves the calendar to the next page

A button which moves the calendar to the previous page

The element which contains the date segments

An individual segment of the start date

An individual segment of the end date

The label for the date field

The element containing the validation message

The hidden input used to submit the start value within a form

The hidden input used to submit the end value within a form

States

State Description
value

A writable store which represents the current value of the calendar.
months

A readable store containing month objects for each month in the calendar.
weekdays

A readable store containing the days of the week, formatted to the locale prop.
headingValue

A readable store containing the heading for the calendar, formatted to the locale prop.
segmentValues

An object of writable stores containing the current values of the date segments.
segmentContents

An object of readable stores used to dynamically render the date segments.
segmentContentsObj

An object of readable stores containing the current values of the date segments.
placeholder

A writable store which represents the placeholder value of the calendar.
isInvalid

A readable store which represents whether the calendar is invalid.

Helpers

Helper Description
nextPage

A function that moves the calendar to the next page.
prevPage

A function that moves the calendar to the previous page.
nextYear

A function that moves the calendar to the next year.
prevYear

A function that moves the calendar to the previous year.
setYear

A function that sets the year of the calendar.
setMonth

A function that sets the month of the calendar.
isDateDisabled

A function that returns whether the given date is disabled.
isDateUnavailable

A function that returns whether the given date is unavailable.
isDateSelected

A function that returns whether the given date is selected.

Options

Option Description
defaultValue

The default value for the date picker. When provided the placeholder will also assume this value.
onValueChange

A function called when the value of the date picker changes. It receives a single argument, which is an object containing curr and prev properties, whose values are the current and previous values of the value store. Whatever you return from this function will be set as the new value of the value store.
defaultPlaceholder

The date that is used when the date picker is empty to determine what point in time the calendar should start at.
onPlaceholderChange

A function called when the placeholder value changes. It receives a single argument, which is an object containing curr and prev properties, whose values are the current and previous values of the placeholder store. Whatever you return from this function will be set as the new value of the placeholder store.
isDateUnavailable

A function that accepts a date and returns a boolean indicating whether the date is unavailable.
minValue

The minimum date that can be selected.
maxValue

The maximum date that can be selected.
disabled

Whether the calendar is disabled.
readonly

Whether the calendar is readonly.
locale

The locale to use when formatting the date.
pagedNavigation

Whether to use paged navigation for the calendar.
weekStartsOn

The day of the week the calendar starts on. 0 is Sunday, 6 is Saturday, etc.
fixedWeeks

Whether to always show 6 weeks in the calendar.
calendarLabel

An accessible label for the calendar.
ids

Override the default ids used by the various elements within the date picker.

calendar

The container of the months and days of the calendar

Data Attributes

Data Attribute Value
[data-invalid]

Present when the calendar is invalid.
[data-disabled]

Present when the calendar is disabled.
[data-readonly]

Present when the calendar is readonly.
[data-melt-calendar]

Present on all calendar elements.

Custom Events

Event Value
m-keydown (e: ) => void

grid

A grid representing a month of the calendar

Data Attributes

Data Attribute Value
[data-disabled]

Present when the calendar is disabled.
[data-melt-calendar-grid]

Present on all grid elements.

cell

A cell representing a single date in the calendar

Data Attributes

Data Attribute Value
[data-disabled]

Present when the date is disabled.
[data-selected]

Present when the date is selected.
[data-value]

The ISO string value of the date.
[data-unavailable]

Present when the date is unavailable.
[data-today]

Present when the date is today.
[data-outside-month]

Present when the date is outside the current month it is displayed in.
[data-outside-visible-months]

Present when the date is outside the months that are visible on the calendar.
[data-selection-start]

Present when the date is the start of the selection.
[data-selection-end]

Present when the date is the end of the selection.
[data-highlighted]

Present when the date is highlighted by the user as they select a range.
[data-focused]

Present when the date is focused.
[data-melt-calendar-cell]

Present on all cell elements.

Custom Events

Event Value
m-click (e: ) => void
m-mouseenter (e: ) => void
m-focusin (e: ) => void

heading

A visual heading for the calendar

Data Attributes

Data Attribute Value
[data-invalid]

Present when the calendar is invalid.
[data-disabled]

Present when the calendar is disabled.
[data-melt-calendar-heading]

Present on all heading elements.

prevButton

A button which moves the calendar to the previous page

Data Attributes

Data Attribute Value
[data-disabled]

Present when the calendar is disabled.
[data-melt-calendar-prevButton]

Present on all prevButton elements.

Custom Events

Event Value
m-click (e: ) => void

nextButton

A button which moves the calendar to the next page

Data Attributes

Data Attribute Value
[data-disabled]

Present when the calendar is disabled.
[data-melt-calendar-nextButton]

Present on all nextButton elements.

Custom Events

Event Value
m-click (e: ) => void

field

The element which contains the date segments

Data Attributes

Data Attribute Value
[data-invalid]

Present when the date field is invalid.
[data-disabled]

Present when the date field is disabled.
[data-melt-datefield-field]

Present on all field elements.

segment

An individual segment of the date

Data Attributes

Data Attribute Value
[data-invalid]

Present when the field is invalid.
[data-disabled]

Present when the field is disabled.
[data-segment]

SegmentPart
[data-melt-datefield-segment]

Present on all segment elements.

Custom Events

Event Value
m-keydown (e: ) => void
m-focusout (e: ) => void
m-click (e: ) => void

label

The label for the date field

Data Attributes

Data Attribute Value
[data-invalid]

Present when the field is invalid.
[data-melt-datefield-label]

Present on all label elements.

validation

The element containing the validation message

Data Attributes

Data Attribute Value
[data-invalid]

Present when the field is invalid.
[data-melt-datefield-validation]

Present on all validation elements.

hiddenInput

The hidden input for the date field

Data Attributes

Data Attribute Value
[data-melt-datefield-hiddenInput]

Present on all hiddenInput elements.

Custom Events

Event Value
m-click (e: ) => void
m-keydown (e: ) => void

trigger

The button(s) which open/close the popover.

Data Attributes

Data Attribute Value
[data-state]

'open' | 'closed'
[data-melt-popover-trigger]

Present on all trigger elements.

Custom Events

Event Value
m-click (e: ) => void
m-keydown (e: ) => void

content

The popover content.

Data Attributes

Data Attribute Value
[data-side]

'top' | 'right' | 'bottom' | 'left'
[data-align]

'start' | 'center' | 'end'
[data-state]

'open' | 'closed'
[data-melt-popover-content]

Present on all content elements.

overlay

The optional popover overlay element, which can be used to give the popover modal-like behavior where the user cannot interact with the rest of the page while the popover is open.

Data Attributes

Data Attribute Value
[data-state]

'open' | 'closed'
[data-melt-popover-overlay]

Present on all overlay elements.

close

The button(s) which close the popover.

Data Attributes

Data Attribute Value
[data-melt-popover-close]

Present on all close elements.

Custom Events

Event Value
m-click (e: ) => void
m-keydown (e: ) => void

arrow

The optional arrow element.

Data Attributes

Data Attribute Value
[data-side]

'top' | 'right' | 'bottom' | 'left'
[data-arrow]

'true'
[data-melt-popover-arrow]

Present on all arrow elements.