DateRangePicker

1"use client";2
3/** Adapted from the pinned HeroUI v3.2.6 basic.json. Copyright NextUI Inc. Apache-2.0. Local RAC label and StyleX replace source Label and utility classes. */4import { DateField, DateRangePicker, RangeCalendar } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 320 } });8export function Basic() {9  return (10    <DateRangePicker xstyle={styles.field} endName="endDate" startName="startDate">11      <DateRangePicker.Label>Trip dates</DateRangePicker.Label>12      <DateField.Group fullWidth>13        <DateField.Input slot="start">14          {(segment) => <DateField.Segment segment={segment} />}15        </DateField.Input>16        <DateRangePicker.RangeSeparator />17        <DateField.Input slot="end">18          {(segment) => <DateField.Segment segment={segment} />}19        </DateField.Input>20        <DateField.Suffix>21          <DateRangePicker.Trigger>22            <DateRangePicker.TriggerIndicator />23          </DateRangePicker.Trigger>24        </DateField.Suffix>25      </DateField.Group>26      <DateRangePicker.Popover>27        <RangeCalendar aria-label="Trip dates">28          <RangeCalendar.Header>29            <RangeCalendar.YearPickerTrigger>30              <RangeCalendar.YearPickerTriggerHeading />31              <RangeCalendar.YearPickerTriggerIndicator />32            </RangeCalendar.YearPickerTrigger>33            <RangeCalendar.NavButton slot="previous" />34            <RangeCalendar.NavButton slot="next" />35          </RangeCalendar.Header>36          <RangeCalendar.Grid>37            <RangeCalendar.GridHeader>38              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}39            </RangeCalendar.GridHeader>40            <RangeCalendar.GridBody>41              {(date) => <RangeCalendar.Cell date={date} />}42            </RangeCalendar.GridBody>43          </RangeCalendar.Grid>44          <RangeCalendar.YearPickerGrid>45            <RangeCalendar.YearPickerGridBody>46              {({ year }) => <RangeCalendar.YearPickerCell year={year} />}47            </RangeCalendar.YearPickerGridBody>48          </RangeCalendar.YearPickerGrid>49        </RangeCalendar>50      </DateRangePicker.Popover>51    </DateRangePicker>52  );53}

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { Disabled } from "./scenarios";

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { Controlled } from "./scenarios";

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { WithValidation } from "./scenarios";

1"use client";2/** Adapted from HeroUI v3.2.6 format-options.json. Copyright NextUI Inc. Apache-2.0. */3import { DateRangePicker, Separator, TimeField } from "@lenso/ui";4import {5  DateFormatter,6  getLocalTimeZone,7  parseDate,8  parseZonedDateTime,9  type DateValue,10} from "@internationalized/date";11import { useLocale } from "react-aria-components/I18nProvider";12import { useMemo, useState } from "react";13import * as stylex from "@stylexjs/stylex";14import {15  FormatControls,16  formatStyles,17  type Granularity,18  type HourCycle,19} from "../date-picker/format-controls";20import { PickerCalendar, RangeInput } from "./parts";21
22export function FormatOptions() {23  const [granularity, setGranularity] = useState<Granularity>("minute");24  const [hourCycle, setHourCycle] = useState<HourCycle>(12);25  const [hideTimeZone, setHideTimeZone] = useState(false);26  const [shouldForceLeadingZeros, setShouldForceLeadingZeros] = useState(false);27  const { locale } = useLocale();28  const dateFormatter = new DateFormatter(locale, {29    day: "numeric",30    month: "short",31    year: "numeric",32  });33  const defaultValue = useMemo<{ start: DateValue; end: DateValue }>(34    () =>35      granularity === "day"36        ? { start: parseDate("2025-02-03"), end: parseDate("2025-02-10") }37        : {38            start: parseZonedDateTime(`2026-02-03T08:45:00[${getLocalTimeZone()}]`),39            end: parseZonedDateTime(`2026-02-10T18:45:00[${getLocalTimeZone()}]`),40          },41    [granularity],42  );43  const timeGranularity = granularity !== "day" ? granularity : undefined;44  return (45    <div {...stylex.props(formatStyles.rangeStack)}>46      <DateRangePicker47        key={granularity}48        xstyle={formatStyles.rangeField}49        defaultValue={defaultValue}50        startName="startDate"51        endName="endDate"52        granularity={granularity}53        hourCycle={hourCycle}54        hideTimeZone={hideTimeZone}55        shouldForceLeadingZeros={shouldForceLeadingZeros}56      >57        {({ state }) => (58          <>59            <DateRangePicker.Label>Date range</DateRangePicker.Label>60            <RangeInput container />61            <DateRangePicker.Popover xstyle={formatStyles.rangePopover}>62              <PickerCalendar fill />63              {timeGranularity && (64                <div {...stylex.props(formatStyles.times)}>65                  <div {...stylex.props(formatStyles.timeRow)}>66                    <span {...stylex.props(formatStyles.label)}>Start Time</span>67                    <TimeField68                      aria-label="Start Time"69                      granularity={timeGranularity}70                      hourCycle={hourCycle}71                      hideTimeZone={hideTimeZone}72                      name="startTime"73                      shouldForceLeadingZeros={shouldForceLeadingZeros}74                      value={state.timeRange?.start ?? null}75                      onChange={(value) => state.setTime("start", value)}76                    >77                      <TimeField.Group variant="secondary">78                        <TimeField.Input>79                          {(segment) => <TimeField.Segment segment={segment} />}80                        </TimeField.Input>81                      </TimeField.Group>82                    </TimeField>83                  </div>84                  <div {...stylex.props(formatStyles.timeRow)}>85                    <span {...stylex.props(formatStyles.label)}>End Time</span>86                    <TimeField87                      aria-label="End Time"88                      granularity={timeGranularity}89                      hourCycle={hourCycle}90                      hideTimeZone={hideTimeZone}91                      name="endTime"92                      shouldForceLeadingZeros={shouldForceLeadingZeros}93                      value={state.timeRange?.end ?? null}94                      onChange={(value) => state.setTime("end", value)}95                    >96                      <TimeField.Group variant="secondary">97                        <TimeField.Input>98                          {(segment) => <TimeField.Segment segment={segment} />}99                        </TimeField.Input>100                      </TimeField.Group>101                    </TimeField>102                  </div>103                </div>104              )}105              <span {...stylex.props(formatStyles.selected)}>106                Selected:{" "}107                {state.value?.start && state.value.end108                  ? dateFormatter.formatRange(109                      state.value.start.toDate(getLocalTimeZone()),110                      state.value.end.toDate(getLocalTimeZone()),111                    )112                  : "No date selected"}113              </span>114            </DateRangePicker.Popover>115          </>116        )}117      </DateRangePicker>118      <Separator xstyle={formatStyles.separator} />119      <span {...stylex.props(formatStyles.heading)}>Format Options</span>120      <FormatControls121        range122        {...{123          granularity,124          setGranularity,125          hourCycle,126          setHourCycle,127          hideTimeZone,128          setHideTimeZone,129          shouldForceLeadingZeros,130          setShouldForceLeadingZeros,131        }}132      />133    </div>134  );135}

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { FormExample } from "./scenarios";

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { WithCustomIndicator } from "./scenarios";

1"use client";2/** Adapted from HeroUI v3.2.6 render-function.json. Copyright NextUI Inc. Apache-2.0. RAC 1.21 owns the native DOM render contract. */3import { DateRangePicker } from "@lenso/ui";4import { PickerCalendar, RangeInput, styles } from "./parts";5
6export function RenderFunction() {7  return (8    <DateRangePicker9      xstyle={styles.field}10      startName="startDate"11      endName="endDate"12      render={(props) => <div data-custom="foo" {...props} />}13    >14      <DateRangePicker.Label>Trip dates</DateRangePicker.Label>15      <RangeInput />16      <DateRangePicker.Popover>17        <PickerCalendar />18      </DateRangePicker.Popover>19    </DateRangePicker>20  );21}

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { InternationalCalendar } from "./scenarios";

1"use client";2/** HeroUI v3.2.6 adapted example. Copyright NextUI Inc. Apache-2.0. */3export { CustomStyles } from "./scenarios";