alpha

DatePicker

DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.

install	`yarn add @react-spectrum/datepicker`
version	3.0.0-alpha.4
usage	`import {DatePicker} from '@react-spectrum/datepicker'`

View repository

GitHub

View package

NPM

Example#

<DatePicker label="Event date" />

<DatePicker label="Event date" />

<DatePicker label="Event date" />

Value#

A DatePicker displays a placeholder date by default. An initial, uncontrolled value can be provided to the DatePicker using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

Date values are provided using objects in the @internationalized/date package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. DatePicker supports values of the following types:

CalendarDate – a date without any time components. May be parsed from a string representation using the parseDate function. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event.
CalendarDateTime – a date with a time, but not in any specific time zone. May be parsed from a string representation using the parseDateTime function. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a ZonedDateTime.
ZonedDateTime – a date with a time in a specific time zone. May be parsed from a string representation using the parseZonedDateTime, parseAbsolute, or parseAbsoluteToLocal functions. Use this type to represent an exact moment in time at a particular location on Earth.

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] = React.useState(parseDate('2020-02-03'));

  return (
    <Flex gap="size-150" wrap>
      <DatePicker
        label="Date (uncontrolled)"
        defaultValue={parseDate('2020-02-03')} />
      <DatePicker
        label="Date (controlled)"
        value={value}
        onChange={setValue} />
    </Flex>
  );
}

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] = React.useState(
    parseDate('2020-02-03')
  );

  return (
    <Flex gap="size-150" wrap>
      <DatePicker
        label="Date (uncontrolled)"
        defaultValue={parseDate('2020-02-03')}
      />
      <DatePicker
        label="Date (controlled)"
        value={value}
        onChange={setValue}
      />
    </Flex>
  );
}

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] =
    React.useState(
      parseDate(
        '2020-02-03'
      )
    );

  return (
    <Flex
      gap="size-150"
      wrap
    >
      <DatePicker
        label="Date (uncontrolled)"
        defaultValue={parseDate(
          '2020-02-03'
        )}
      />
      <DatePicker
        label="Date (controlled)"
        value={value}
        onChange={setValue}
      />
    </Flex>
  );
}

Time zones#

DatePicker is time zone aware when a ZonedDateTime object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated.

In most cases, your data will come from and be sent to a server as an ISO 8601 formatted string. @internationalized/date includes functions for parsing strings in multiple formats into ZonedDateTime objects. Which format you use will depend on what information you need to store.

parseZonedDateTime – This function parses a date with an explicit time zone and optional UTC offset attached (e.g. "2021-11-07T00:45[America/Los_Angeles]" or "2021-11-07T00:45-07:00[America/Los_Angeles]"). This format preserves the maximum amount of information. If the exact local time and time zone that a user selected is important, use this format. Storing the time zone and offset that was selected rather than converting to UTC ensures that the local time is correct regardless of daylight saving rule changes (e.g. if a locale abolishes DST). Examples where this applies include calendar events, reminders, and other times that occur in a particular location.
parseAbsolute – This function parses an absolute date and time that occurs at the same instant at all locations on Earth. It can be represented in UTC (e.g. "2021-11-07T07:45:00Z"), or stored with a particular offset (e.g. "2021-11-07T07:45:00-07:00"). A time zone identifier, e.g. America/Los_Angeles, must be passed, and the result will be converted into that time zone. Absolute times are the best way to represent events that occurred in the past, or future events where an exact time is needed, regardless of time zone.
parseAbsoluteToLocal – This function parses an absolute date and time into the current user's local time zone. It is a shortcut for parseAbsolute, and accepts the same formats.

import {parseZonedDateTime} from '@internationalized/date';

<DatePicker
  label="Event date"
  defaultValue={parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]')}
/>

import {parseZonedDateTime} from '@internationalized/date';

<DatePicker
  label="Event date"
  defaultValue={parseZonedDateTime(
    '2022-11-07T00:45[America/Los_Angeles]'
  )}
/>

import {parseZonedDateTime} from '@internationalized/date';

<DatePicker
  label="Event date"
  defaultValue={parseZonedDateTime(
    '2022-11-07T00:45[America/Los_Angeles]'
  )}
/>

DatePicker displays times in the time zone included in the ZoneDateTime object. The above example is always displayed in Pacific Standard Time because the America/Los_Angeles time zone identifier is provided. @internationalized/date includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.

import {parseAbsoluteToLocal} from '@internationalized/date';

<DatePicker
  label="Event date"
  defaultValue={parseAbsoluteToLocal('2021-11-07T07:45:00Z')}
/>

import {parseAbsoluteToLocal} from '@internationalized/date';

<DatePicker
  label="Event date"
  defaultValue={parseAbsoluteToLocal(
    '2021-11-07T07:45:00Z'
  )}
/>

import {parseAbsoluteToLocal} from '@internationalized/date';

<DatePicker
  label="Event date"
  defaultValue={parseAbsoluteToLocal(
    '2021-11-07T07:45:00Z'
  )}
/>

Granularity#

The granularity prop allows you to control the smallest unit that is displayed by a DatePicker. By default, CalendarDate values are displayed with "day" granularity (year, month, and day), and CalendarDateTime and ZonedDateTime values are displayed with "minute" granularity. More granular time values can be displayed by setting the granularity prop to "second".

In addition, when a value with a time is provided but you wish to only display the date, you can set the granularity to "day". This has no effect on the actual value (it still has a time component), only on what fields are displayed. In the following example, two DatePickers are synchronized with the same value, but display different granularities.

function Example() {
  let [date, setDate] = React.useState(
    parseAbsoluteToLocal('2021-04-07T18:45:22Z')
  );

  return (
    <Flex gap="size-150" wrap>
      <DatePicker
        label="Date and time"
        granularity="second"
        value={date}
        onChange={setDate}
      />
      <DatePicker
        label="Date"
        granularity="day"
        value={date}
        onChange={setDate}
      />
    </Flex>
  );
}

function Example() {
  let [date, setDate] = React.useState(
    parseAbsoluteToLocal('2021-04-07T18:45:22Z')
  );

  return (
    <Flex gap="size-150" wrap>
      <DatePicker
        label="Date and time"
        granularity="second"
        value={date}
        onChange={setDate}
      />
      <DatePicker
        label="Date"
        granularity="day"
        value={date}
        onChange={setDate}
      />
    </Flex>
  );
}

function Example() {
  let [date, setDate] =
    React.useState(
      parseAbsoluteToLocal(
        '2021-04-07T18:45:22Z'
      )
    );

  return (
    <Flex
      gap="size-150"
      wrap
    >
      <DatePicker
        label="Date and time"
        granularity="second"
        value={date}
        onChange={setDate}
      />
      <DatePicker
        label="Date"
        granularity="day"
        value={date}
        onChange={setDate}
      />
    </Flex>
  );
}

If no value or defaultValue prop is passed, then the granularity prop also affects which type of value is emitted from the onChange event. Note that by default, time values will not have a time zone because none was supplied. You can override this by setting the placeholderValue prop explicitly. Values emitted from onChange will use the time zone of the placeholder value.

import {now} from '@internationalized/date';

<Flex gap="size-150" wrap>
  <DatePicker
    label="Event date"
    granularity="second" />
  <DatePicker
    label="Event date"
    placeholderValue={now('America/New_York')}
    granularity="second" />
</Flex>

import {now} from '@internationalized/date';

<Flex gap="size-150" wrap>
  <DatePicker
    label="Event date"
    granularity="second" />
  <DatePicker
    label="Event date"
    placeholderValue={now('America/New_York')}
    granularity="second" />
</Flex>

import {now} from '@internationalized/date';

<Flex
  gap="size-150"
  wrap
>
  <DatePicker
    label="Event date"
    granularity="second"
  />
  <DatePicker
    label="Event date"
    placeholderValue={now(
      'America/New_York'
    )}
    granularity="second"
  />
</Flex>

International calendars#

DatePicker supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the Unicode calendar locale extension, passed to the Provider component.

Selected dates passed to onChange always use the same calendar system as the value or defaultValue prop. If no value or defaultValue is provided, then dates passed to onChange are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.

The below example displays a DatePicker in the Hindi language, using the Indian calendar. Dates emitted from onChange are in the Gregorian calendar.

import {Provider} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] = React.useState(null);
  return (
    <Provider locale="hi-IN-u-ca-indian">
      <DatePicker label="Date" value={date} onChange={setDate} />
      <p>Selected date: {date?.toString()}</p>
    </Provider>
  );
}

import {Provider} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] = React.useState(null);
  return (
    <Provider locale="hi-IN-u-ca-indian">
      <DatePicker
        label="Date"
        value={date}
        onChange={setDate}
      />
      <p>Selected date: {date?.toString()}</p>
    </Provider>
  );
}

import {Provider} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] =
    React.useState(null);
  return (
    <Provider locale="hi-IN-u-ca-indian">
      <DatePicker
        label="Date"
        value={date}
        onChange={setDate}
      />
      <p>
        Selected date:
        {' '}
        {date
          ?.toString()}
      </p>
    </Provider>
  );
}

Labeling#

A visual label should be provided for the DatePicker using the label prop. If the DatePicker is required, the isRequired and necessityIndicator props can be used to show a required state.

<Flex gap="size-150" wrap>
  <DatePicker label="Birth date" />
  <DatePicker label="Birth date" isRequired necessityIndicator="icon" />
  <DatePicker label="Birth date" isRequired necessityIndicator="label" />
  <DatePicker label="Birth date" necessityIndicator="label" />
</Flex>

<Flex gap="size-150" wrap>
  <DatePicker label="Birth date" />
  <DatePicker
    label="Birth date"
    isRequired
    necessityIndicator="icon"
  />
  <DatePicker
    label="Birth date"
    isRequired
    necessityIndicator="label"
  />
  <DatePicker
    label="Birth date"
    necessityIndicator="label"
  />
</Flex>

<Flex
  gap="size-150"
  wrap
>
  <DatePicker label="Birth date" />
  <DatePicker
    label="Birth date"
    isRequired
    necessityIndicator="icon"
  />
  <DatePicker
    label="Birth date"
    isRequired
    necessityIndicator="label"
  />
  <DatePicker
    label="Birth date"
    necessityIndicator="label"
  />
</Flex>

Accessibility#

If a visible label isn't specified, an aria-label must be provided to the DatePicker for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Internationalization#

In order to internationalize a DatePicker, a localized string should be passed to the label or aria-label prop. When the necessityIndicator prop is set to "label", a localized string will be provided for "(required)" or "(optional)" automatically.

Events#

DatePicker accepts an onChange prop which is triggered whenever the date is edited by the user. The example below uses onChange to update a separate element with a formatted version of the date in the user's locale and local time zone. This is done by converting the date to a native JavaScript Date object to pass to the formatter.

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] = React.useState(parseDate('1985-07-03'));
  let formatter = useDateFormatter({dateStyle: 'full'});

  return (
    <>
      <DatePicker label="Birth date" value={date} onChange={setDate} />
      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
    </>
  );
}

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] = React.useState(
    parseDate('1985-07-03')
  );
  let formatter = useDateFormatter({ dateStyle: 'full' });

  return (
    <>
      <DatePicker
        label="Birth date"
        value={date}
        onChange={setDate}
      />
      <p>
        Selected date:{' '}
        {formatter.format(date.toDate(getLocalTimeZone()))}
      </p>
    </>
  );
}

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] =
    React.useState(
      parseDate(
        '1985-07-03'
      )
    );
  let formatter =
    useDateFormatter({
      dateStyle: 'full'
    });

  return (
    <>
      <DatePicker
        label="Birth date"
        value={date}
        onChange={setDate}
      />
      <p>
        Selected date:
        {' '}
        {formatter
          .format(
            date.toDate(
              getLocalTimeZone()
            )
          )}
      </p>
    </>
  );
}

Validation#

DatePicker can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" via the validationState prop. The errorMessage prop can be used to communicate errors to the user.

This example validates that the selected date is a weekday and not a weekend according to the current locale.

import {today, isWeekend} from '@internationalized/date';
import {useLocale} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] = React.useState(today(getLocalTimeZone()));
  let {locale} = useLocale();

  return (
    <DatePicker
      label="Appointment date"
      value={date}
      onChange={setDate}
      validationState={isWeekend(date, locale) ? 'invalid' : 'valid'}
      description="Select a weekday"
      errorMessage="We are closed on weekends" />
  );
}

import {isWeekend, today} from '@internationalized/date';
import {useLocale} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] = React.useState(
    today(getLocalTimeZone())
  );
  let { locale } = useLocale();

  return (
    <DatePicker
      label="Appointment date"
      value={date}
      onChange={setDate}
      validationState={isWeekend(date, locale)
        ? 'invalid'
        : 'valid'}
      description="Select a weekday"
      errorMessage="We are closed on weekends"
    />
  );
}

import {
  isWeekend,
  today
} from '@internationalized/date';
import {useLocale} from '@adobe/react-spectrum';

function Example() {
  let [date, setDate] =
    React.useState(
      today(
        getLocalTimeZone()
      )
    );
  let { locale } =
    useLocale();

  return (
    <DatePicker
      label="Appointment date"
      value={date}
      onChange={setDate}
      validationState={isWeekend(
          date,
          locale
        )
        ? 'invalid'
        : 'valid'}
      description="Select a weekday"
      errorMessage="We are closed on weekends"
    />
  );
}

Minimum and maximum values#

The minValue and maxValue props can also be used to perform builtin validation. This prevents the user from selecting dates outside the valid range in the calendar, and displays an invalid state if the user enters an invalid date into the date field.

This example only accepts dates after today.

<DatePicker
  label="Appointment date"
  minValue={today(getLocalTimeZone())}
  defaultValue={parseDate('2022-02-03')} />

<DatePicker
  label="Appointment date"
  minValue={today(getLocalTimeZone())}
  defaultValue={parseDate('2022-02-03')} />

<DatePicker
  label="Appointment date"
  minValue={today(
    getLocalTimeZone()
  )}
  defaultValue={parseDate(
    '2022-02-03'
  )}
/>

Placeholder value#

When no value is set, a placeholder value is shown. By default, this is today's date at midnight. However, this can be overridden by setting the placeholderValue prop to a more appropriate placeholder for your specific usecase.

import {CalendarDate} from '@internationalized/date';

<DatePicker
  label="Birth date"
  placeholderValue={new CalendarDate(1980, 1, 1)}
/>

import {CalendarDate} from '@internationalized/date';

<DatePicker
  label="Birth date"
  placeholderValue={new CalendarDate(1980, 1, 1)}
/>

import {CalendarDate} from '@internationalized/date';

<DatePicker
  label="Birth date"
  placeholderValue={new CalendarDate(
    1980,
    1,
    1
  )}
/>

Hide time zone#

When a ZonedDateTime object is provided as the value of a DatePicker, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the hideTimeZone option.

<DatePicker
  label="Appointment time"
  defaultValue={parseZonedDateTime('2022-11-07T10:45[America/Los_Angeles]')}
  hideTimeZone />

<DatePicker
  label="Appointment time"
  defaultValue={parseZonedDateTime(
    '2022-11-07T10:45[America/Los_Angeles]'
  )}
  hideTimeZone
/>

<DatePicker
  label="Appointment time"
  defaultValue={parseZonedDateTime(
    '2022-11-07T10:45[America/Los_Angeles]'
  )}
  hideTimeZone
/>

Hour cycle#

By default, DatePicker displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the hourCycle prop if needed for a specific usecase. This example forces the DatePicker to use 24-hour time, regardless of the locale.

<DatePicker
  label="Appointment time"
  granularity="minute"
  hourCycle={24} />

<DatePicker
  label="Appointment time"
  granularity="minute"
  hourCycle={24} />

<DatePicker
  label="Appointment time"
  granularity="minute"
  hourCycle={24}
/>

A CalendarDate represents a date without any time components in a specific calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): CalendarDate`	Returns a copy of this date.
`add( (duration: DateDuration )): CalendarDate`	Returns a new `CalendarDate` with the given duration added to it.
`subtract( (duration: DateDuration )): CalendarDate`	Returns a new `CalendarDate` with the given duration subtracted from it.
`set( (fields: DateFields )): CalendarDate`	Returns a new `CalendarDate` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField, amount: number, options?: CycleOptions ): CalendarDate`	Returns a new `CalendarDate` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate( (timeZone: string )): Date`	Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone.
`toString(): string`	Converts the date to an ISO 8601 formatted string.
`compare( (b: AnyCalendarDate )): number`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

The Calendar interface represents a calendar system, including information about how days, months, years, and eras are organized, and methods to perform arithmetic on dates.

Properties

Name	Type	Description
`identifier`	`string`	A string identifier for the calendar, as defined by Unicode CLDR.

Methods

Method	Description
`fromJulianDay( (jd: number )): CalendarDate`	Creates a CalendarDate in this calendar from the given Julian day number.
`toJulianDay( (date: AnyCalendarDate )): number`	Converts a date in this calendar to a Julian day number.
`getDaysInMonth( (date: AnyCalendarDate )): number`	Returns the number of days in the month of the given date.
`getMonthsInYear( (date: AnyCalendarDate )): number`	Returns the number of months in the year of the given date.
`getYearsInEra( (date: AnyCalendarDate )): number`	Returns the number of years in the era of the given date.
`getEras(): string[]`	Returns a list of era identifiers for the calendar.
`getMinimumMonthInYear( (date: AnyCalendarDate )): number`	Returns the minimum month number of the given date's year. Normally, this is 1, but in some calendars such as the Japanese, eras may begin in the middle of a year.
`getMinimumDayInMonth( (date: AnyCalendarDate )): number`	Returns the minimum day number of the given date's month. Normally, this is 1, but in some calendars such as the Japanese, eras may begin in the middle of a month.

Name	Type	Description
`calendar`	`Calendar`
`era`	`string`
`year`	`number`
`month`	`number`
`day`	`number`

Method	Description
`copy():`

Represents an amount of time in calendar-specific units, for use when performing arithmetic.

Name	Type	Description
`years`	`number`	The number of years to add or subtract.
`months`	`number`	The number of months to add or subtract.
`weeks`	`number`	The number of weeks to add or subtract.
`days`	`number`	The number of days to add or subtract.

Name	Type	Description
`era`	`string`
`year`	`number`
`month`	`number`
`day`	`number`

Name	Type	Description
`round`	`boolean`	Whether to round the field value to the nearest interval of the amount.

parseDate(
  (value: string
)): CalendarDate

A CalendarDateTime represents a date and time without a time zone, in a specific calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.
`hour`	`number`	The hour in the day, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): CalendarDateTime`	Returns a copy of this date.
`add( (duration: DateTimeDuration )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given duration added to it.
`subtract( (duration: DateTimeDuration )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given duration subtracted from it.
`set( (fields: DateFields & & TimeFields )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField \| \| TimeField, amount: number, options?: CycleTimeOptions ): CalendarDateTime`	Returns a new `CalendarDateTime` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate( (timeZone: string, , disambiguation?: Disambiguation )): Date`	Converts the date to a native JavaScript Date object in the given time zone.
`toString(): string`	Converts the date to an ISO 8601 formatted string.
`compare( (b: CalendarDate \| CalendarDateTime \| ZonedDateTime )): number`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

Represents an amount of time with both date and time components, for use when performing arithmetic.

Name	Type	Description
`years`	`number`	The number of years to add or subtract.
`months`	`number`	The number of months to add or subtract.
`weeks`	`number`	The number of weeks to add or subtract.
`days`	`number`	The number of days to add or subtract.
`hours`	`number`	The number of hours to add or subtract.
`minutes`	`number`	The number of minutes to add or subtract.
`seconds`	`number`	The number of seconds to add or subtract.
`milliseconds`	`number`	The number of milliseconds to add or subtract.

Name	Type	Description
`hour`	`number`
`minute`	`number`
`second`	`number`
`millisecond`	`number`

Name	Type	Default	Description
`hourCycle`	`12 \| 24`	`24`	Whether to use 12 or 24 hour time. If 12 hour time is chosen, the resulting value will remain in the same day period as the original value (e.g. if the value is AM, the resulting value also be AM).
`round`	`boolean`	—	Whether to round the field value to the nearest interval of the amount.

'compatible'
  | 'earlier'
  | 'later'
  | 'reject'

A ZonedDateTime represents a date and time in a specific time zone and calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.
`hour`	`number`	The hour in the day, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.
`timeZone`	`string`	The IANA time zone identifier that this date and time is represented in.
`offset`	`number`	The UTC offset for this time, in seconds.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): ZonedDateTime`	Returns a copy of this date.
`add( (duration: DateTimeDuration )): void`	Returns a new `ZonedDateTime` with the given duration added to it.
`subtract( (duration: DateTimeDuration )): void`	Returns a new `ZonedDateTime` with the given duration subtracted from it.
`set( (fields: DateFields & & TimeFields, , disambiguation?: Disambiguation )): void`	Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField \| \| TimeField, amount: number, options?: CycleTimeOptions ): void`	Returns a new `ZonedDateTime` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate(): void`	Converts the date to a native JavaScript Date object.
`toString(): void`	Converts the date to an ISO 8601 formatted string, including the UTC offset and time zone identifier.
`toAbsoluteString(): void`	Converts the date to an ISO 8601 formatted string in UTC.
`compare( (b: CalendarDate \| CalendarDateTime \| ZonedDateTime )): void`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

parseDateTime(
  (value: string
)): CalendarDateTime

parseZonedDateTime(
  (value: string,
  , disambiguation?: Disambiguation
)): ZonedDateTime

parseAbsolute(
  (value: string,
  , timeZone: string
)): ZonedDateTime

parseAbsoluteToLocal(
  (value: string
)): ZonedDateTime