DateField

1"use client";2
3// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.4import { DateField } from "@lenso/ui";5import { styles } from "./demo-styles";6
7export function Basic() {8  return (9    <DateField xstyle={styles.field} name="date">10      <DateField.Label>Date</DateField.Label>11      <DateField.Group>12        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>13      </DateField.Group>14    </DateField>15  );16}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { Calendar } from "@gravity-ui/icons";4import { DateField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./demo-styles";7
8export function WithPrefixIcon() {9  return (10    <DateField xstyle={styles.field} name="date">11      <DateField.Label>Date</DateField.Label>12      <DateField.Group>13        <DateField.Prefix>14          <Calendar {...stylex.props(styles.icon)} aria-hidden="true" />15        </DateField.Prefix>16        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>17      </DateField.Group>18    </DateField>19  );20}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { Calendar } from "@gravity-ui/icons";4import { DateField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./demo-styles";7
8export function WithSuffixIcon() {9  return (10    <DateField xstyle={styles.field} name="date">11      <DateField.Label>Date</DateField.Label>12      <DateField.Group>13        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        <DateField.Suffix>15          <Calendar {...stylex.props(styles.icon)} aria-hidden="true" />16        </DateField.Suffix>17      </DateField.Group>18    </DateField>19  );20}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { Calendar, ChevronDown } from "@gravity-ui/icons";4import { DateField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./demo-styles";7
8export function WithPrefixAndSuffix() {9  return (10    <DateField xstyle={styles.field} name="date">11      <DateField.Label>Date</DateField.Label>12      <DateField.Group>13        <DateField.Prefix>14          <Calendar {...stylex.props(styles.icon)} aria-hidden="true" />15        </DateField.Prefix>16        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>17        <DateField.Suffix>18          <ChevronDown {...stylex.props(styles.icon)} aria-hidden="true" />19        </DateField.Suffix>20      </DateField.Group>21      <DateField.Description>Enter a date</DateField.Description>22    </DateField>23  );24}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./demo-styles";6
7export function Variants() {8  return (9    <div {...stylex.props(styles.column)}>10      <DateField xstyle={styles.field} name="primary-date">11        <DateField.Label>Primary variant</DateField.Label>12        <DateField.Group variant="primary">13          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        </DateField.Group>15      </DateField>16      <DateField xstyle={styles.field} name="secondary-date">17        <DateField.Label>Secondary variant</DateField.Label>18        <DateField.Group variant="secondary">19          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>20        </DateField.Group>21      </DateField>22    </div>23  );24}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { Calendar } from "@gravity-ui/icons";4import { DateField, Surface } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./demo-styles";7
8export function OnSurface() {9  return (10    <Surface xstyle={styles.surface}>11      <DateField xstyle={styles.full} name="date">12        <DateField.Label>Date</DateField.Label>13        <DateField.Group variant="secondary">14          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>15        </DateField.Group>16        <DateField.Description>Enter a date</DateField.Description>17      </DateField>18      <DateField xstyle={styles.full} name="date-2">19        <DateField.Label>Appointment date</DateField.Label>20        <DateField.Group variant="secondary">21          <DateField.Prefix>22            <Calendar {...stylex.props(styles.icon)} aria-hidden="true" />23          </DateField.Prefix>24          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>25        </DateField.Group>26        <DateField.Description>Enter a date for your appointment</DateField.Description>27      </DateField>28    </Surface>29  );30}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./demo-styles";6
7export function WithDescription() {8  return (9    <div {...stylex.props(styles.column)}>10      <DateField xstyle={styles.field} name="date">11        <DateField.Label>Birth date</DateField.Label>12        <DateField.Group>13          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        </DateField.Group>15        <DateField.Description>Enter your date of birth</DateField.Description>16      </DateField>17      <DateField xstyle={styles.field} name="appointment-date">18        <DateField.Label>Appointment date</DateField.Label>19        <DateField.Group>20          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>21        </DateField.Group>22        <DateField.Description>Enter a date for your appointment</DateField.Description>23      </DateField>24    </div>25  );26}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./demo-styles";6
7export function Required() {8  return (9    <div {...stylex.props(styles.column)}>10      <DateField isRequired xstyle={styles.field} name="date">11        <DateField.Label>Date</DateField.Label>12        <DateField.Group>13          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        </DateField.Group>15      </DateField>16      <DateField isRequired xstyle={styles.field} name="start-date">17        <DateField.Label>Start date</DateField.Label>18        <DateField.Group>19          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>20        </DateField.Group>21        <DateField.Description>Required field</DateField.Description>22      </DateField>23    </div>24  );25}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./demo-styles";7
8export function Disabled() {9  return (10    <div {...stylex.props(styles.column)}>11      <DateField isDisabled xstyle={styles.field} name="date" value={today(getLocalTimeZone())}>12        <DateField.Label>Date</DateField.Label>13        <DateField.Group>14          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>15        </DateField.Group>16        <DateField.Description>This date field is disabled</DateField.Description>17      </DateField>18      <DateField isDisabled xstyle={styles.field} name="date-empty">19        <DateField.Label>Date</DateField.Label>20        <DateField.Group>21          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>22        </DateField.Group>23        <DateField.Description>This date field is disabled</DateField.Description>24      </DateField>25    </div>26  );27}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { Calendar, ChevronDown } from "@gravity-ui/icons";4import { DateField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./demo-styles";7
8export function FullWidth() {9  return (10    <div {...stylex.props(styles.wide)}>11      <DateField fullWidth name="date">12        <DateField.Label>Date</DateField.Label>13        <DateField.Group>14          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>15        </DateField.Group>16      </DateField>17      <DateField fullWidth name="date-icons">18        <DateField.Label>Date</DateField.Label>19        <DateField.Group>20          <DateField.Prefix>21            <Calendar {...stylex.props(styles.icon)} aria-hidden="true" />22          </DateField.Prefix>23          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>24          <DateField.Suffix>25            <ChevronDown {...stylex.props(styles.icon)} aria-hidden="true" />26          </DateField.Suffix>27        </DateField.Group>28      </DateField>29    </div>30  );31}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./demo-styles";6
7export function Invalid() {8  return (9    <div {...stylex.props(styles.column)}>10      <DateField isInvalid isRequired xstyle={styles.field} name="date">11        <DateField.Label>Date</DateField.Label>12        <DateField.Group>13          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        </DateField.Group>15        <DateField.Error>Please enter a valid date</DateField.Error>16      </DateField>17      <DateField isInvalid xstyle={styles.field} name="invalid-date">18        <DateField.Label>Date</DateField.Label>19        <DateField.Group>20          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>21        </DateField.Group>22        <DateField.Error>Date must be in the future</DateField.Error>23      </DateField>24    </div>25  );26}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import type { DateValue } from "@internationalized/date";4import { CircleQuestion } from "@gravity-ui/icons";5import { DateField, Select, Tooltip } from "@lenso/ui";6import { parseDate, parseZonedDateTime } from "@internationalized/date";7import { useState, useId } from "react";8import * as stylex from "@stylexjs/stylex";9import { styles } from "./demo-styles";10
11export function Granularity() {12  const granularityOptions = [13    { id: "day", label: "Day" },14    { id: "hour", label: "Hour" },15    { id: "minute", label: "Minute" },16    { id: "second", label: "Second" },17  ] as const;18  const [granularity, setGranularity] = useState<"day" | "hour" | "minute" | "second">("day");19  const labelId = useId();20  const defaultValue: DateValue =21    granularity === "day"22      ? parseDate("2025-02-03")23      : parseZonedDateTime("2025-02-03T08:45:00[America/Los_Angeles]");24  return (25    <div {...stylex.props(styles.granularity)}>26      <DateField27        key={granularity}28        xstyle={styles.field}29        defaultValue={defaultValue}30        granularity={granularity}31        name="granularity-date"32      >33        <DateField.Label>Appointment Date</DateField.Label>34        <DateField.Group>35          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>36        </DateField.Group>37      </DateField>38      <div {...stylex.props(styles.selector)}>39        <div {...stylex.props(styles.selectorLabel)}>40          <span id={labelId}>Granularity</span>41          <Tooltip>42            <Tooltip.Trigger delay={0} aria-label="Granularity information">43              <CircleQuestion {...stylex.props(styles.icon)} aria-hidden="true" />44            </Tooltip.Trigger>45            <Tooltip.Portal>46              <Tooltip.Positioner side="bottom" align="start">47                <Tooltip.Popup>48                  <p>49                    Determines the smallest unit displayed in the date picker. By default, this is50                    "day" for dates, and "minute" for times.51                  </p>52                </Tooltip.Popup>53              </Tooltip.Positioner>54            </Tooltip.Portal>55          </Tooltip>56        </div>57        <Select58          value={granularity}59          variant="secondary"60          onValueChange={(value) => {61            if (value) setGranularity(value);62          }}63        >64          <Select.Trigger xstyle={styles.select} aria-labelledby={labelId}>65            <Select.Value>66              {(value) =>67                granularityOptions.find((option) => option.id === value)?.label ??68                "Select granularity"69              }70            </Select.Value>71            <Select.Indicator />72          </Select.Trigger>73          <Select.Portal>74            <Select.Positioner>75              <Select.Popover>76                <Select.List>77                  {granularityOptions.map((option) => (78                    <Select.Item key={option.id} value={option.id}>79                      <Select.ItemText>{option.label}</Select.ItemText>80                      <Select.ItemIndicator />81                    </Select.Item>82                  ))}83                </Select.List>84              </Select.Popover>85            </Select.Positioner>86          </Select.Portal>87        </Select>88      </div>89    </div>90  );91}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import type { DateValue } from "@internationalized/date";4import { Button, DateField } from "@lenso/ui";5import { getLocalTimeZone, today } from "@internationalized/date";6import { useState } from "react";7import * as stylex from "@stylexjs/stylex";8import { styles } from "./demo-styles";9
10export function Controlled() {11  const [value, setValue] = useState<DateValue | null>(null);12  return (13    <div {...stylex.props(styles.column)}>14      <DateField xstyle={styles.field} name="date" value={value} onChange={setValue}>15        <DateField.Label>Date</DateField.Label>16        <DateField.Group>17          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>18        </DateField.Group>19        <DateField.Description>20          Current value: {value ? value.toString() : "(empty)"}21        </DateField.Description>22      </DateField>23      <div {...stylex.props(styles.row)}>24        <Button variant="tertiary" onClick={() => setValue(today(getLocalTimeZone()))}>25          Set today26        </Button>27        <Button variant="tertiary" onClick={() => setValue(null)}>28          Clear29        </Button>30      </div>31    </div>32  );33}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import type { DateValue } from "@internationalized/date";4import { Calendar } from "@gravity-ui/icons";5import { Button, DateField } from "@lenso/ui";6import { Form } from "react-aria-components/Form";7import { getLocalTimeZone, today } from "@internationalized/date";8import { useState, type FormEvent } from "react";9import * as stylex from "@stylexjs/stylex";10import { styles } from "./demo-styles";11
12export function FormExample() {13  const [value, setValue] = useState<DateValue | null>(null);14  const [isSubmitting, setIsSubmitting] = useState(false);15  const todayDate = today(getLocalTimeZone());16  const isInvalid = value !== null && value.compare(todayDate) < 0;17  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {18    event.preventDefault();19    if (!value || isInvalid || isSubmitting) return;20    setIsSubmitting(true);21    setTimeout(() => {22      console.log("Date submitted:", { date: value });23      setValue(null);24      setIsSubmitting(false);25    }, 1500);26  };27  return (28    <Form {...stylex.props(styles.form)} onSubmit={handleSubmit}>29      <DateField30        isRequired31        xstyle={styles.full}32        isInvalid={isInvalid}33        minValue={todayDate}34        name="date"35        value={value}36        onChange={setValue}37      >38        <DateField.Label>Appointment date</DateField.Label>39        <DateField.Group>40          <DateField.Prefix>41            <Calendar {...stylex.props(styles.icon)} aria-hidden="true" />42          </DateField.Prefix>43          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>44        </DateField.Group>45        {isInvalid ? (46          <DateField.Error>Date must be today or in the future</DateField.Error>47        ) : (48          <DateField.Description>Enter a date from today onwards</DateField.Description>49        )}50      </DateField>51      <Button52        xstyle={styles.full}53        disabled={!value || isInvalid}54        isLoading={isSubmitting}55        type="submit"56        variant="primary"57      >58        {isSubmitting ? "Submitting..." : "Submit"}59      </Button>60    </Form>61  );62}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import type { DateValue } from "@internationalized/date";4import { DateField } from "@lenso/ui";5import { getLocalTimeZone, today } from "@internationalized/date";6import { useState } from "react";7import * as stylex from "@stylexjs/stylex";8import { styles } from "./demo-styles";9
10export function WithValidation() {11  const [value, setValue] = useState<DateValue | null>(null);12  const todayDate = today(getLocalTimeZone());13  const isInvalid = value !== null && value.compare(todayDate) < 0;14  return (15    <div {...stylex.props(styles.column)}>16      <DateField17        isRequired18        xstyle={styles.field}19        isInvalid={isInvalid}20        minValue={todayDate}21        name="date"22        value={value}23        onChange={setValue}24      >25        <DateField.Label>Date</DateField.Label>26        <DateField.Group>27          <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>28        </DateField.Group>29        {isInvalid ? (30          <DateField.Error>Date must be today or in the future</DateField.Error>31        ) : (32          <DateField.Description>Enter a date from today onwards</DateField.Description>33        )}34      </DateField>35    </div>36  );37}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import { styles } from "./demo-styles";5
6export function RenderFunction() {7  return (8    <DateField9      xstyle={styles.field}10      name="date"11      render={(props) => <div {...props} data-custom="date-field" />}12    >13      <DateField.Label render={(props) => <span {...props} data-custom="date-field-label" />}>14        Date15      </DateField.Label>16      <DateField.Group render={(props) => <div {...props} data-custom="date-field-group" />}>17        <DateField.Input render={(props) => <div {...props} data-custom="date-field-input" />}>18          {(segment) => <DateField.Segment segment={segment} />}19        </DateField.Input>20      </DateField.Group>21    </DateField>22  );23}

1"use client";2// HeroUI v3.2.6. Copyright NextUI Inc. SPDX-License-Identifier: Apache-2.0.3import { DateField } from "@lenso/ui";4import { styles } from "./demo-styles";5
6export function CustomStyles() {7  return (8    <DateField xstyle={styles.field} name="due-date">9      <DateField.Label>Due date</DateField.Label>10      <DateField.Group xstyle={styles.dateCustom} variant="secondary">11        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>12      </DateField.Group>13    </DateField>14  );15}