Date Picker

import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from '@/components/ui/date-picker';

export default function DatePickerDemo() {
  return (
    <DatePicker>
      <DatePickerTrigger />
      <DatePickerContent />
    </DatePicker>
  );
}

'use client';

import * as React from 'react';

import { addDays } from 'date-fns';

import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
  type DateRange,
} from '@/components/ui/date-picker';

export default function DatePickerRange() {
  // A fixed day rather than today, so the server and the browser render the same month.
  const [range, setRange] = React.useState<DateRange | undefined>(() => {
    const from = new Date(new Date().getFullYear(), 0, 12);
    return { from, to: addDays(from, 6) };
  });

  return (
    <DatePicker mode="range" value={range} onValueChange={setRange}>
      <DatePickerTrigger />
      <DatePickerContent numberOfMonths={2} />
    </DatePicker>
  );
}

import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from '@/components/ui/date-picker';

export default function DatePickerDropdown() {
  return (
    <DatePicker placeholder="Date of birth">
      <DatePickerTrigger />
      <DatePickerContent
        captionLayout="dropdown"
        defaultMonth={new Date(1990, 0)}
        startMonth={new Date(1930, 0)}
        endMonth={new Date()}
      />
    </DatePicker>
  );
}

'use client';

import * as React from 'react';

import * as stylex from '@stylexjs/stylex';
import { addDays } from 'date-fns';

import { Button } from '@/components/ui/button';
import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from '@/components/ui/date-picker';
import { space } from '@/lib/constants.stylex';

const presets = [
  { label: 'Today', days: 0 },
  { label: 'Tomorrow', days: 1 },
  { label: 'In a week', days: 7 },
];

export default function DatePickerPresets() {
  const [date, setDate] = React.useState<Date | undefined>();
  const [open, setOpen] = React.useState(false);

  return (
    <DatePicker
      open={open}
      onOpenChange={setOpen}
      value={date}
      onValueChange={setDate}
    >
      <DatePickerTrigger />
      <DatePickerContent>
        <div {...stylex.props(styles.presets)}>
          {presets.map(({ label, days }) => (
            <Button
              key={label}
              variant="outline"
              size="xs"
              onClick={() => {
                setDate(addDays(new Date(), days));
                // A preset is a complete choice, so it closes the popover the
                // same way picking a day in the calendar does.
                setOpen(false);
              }}
            >
              {label}
            </Button>
          ))}
        </div>
      </DatePickerContent>
    </DatePicker>
  );
}

const styles = stylex.create({
  presets: {
    display: 'flex',
    gap: space.s2,
  },
});

'use client';

import * as React from 'react';

import * as stylex from '@stylexjs/stylex';
import { format } from 'date-fns';

import { Button } from '@/components/ui/button';
import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from '@/components/ui/date-picker';
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
import { space, fontSize, container } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function DatePickerForm() {
  const [date, setDate] = React.useState<Date | undefined>();
  const [submitted, setSubmitted] = React.useState<string | null>(null);

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        setSubmitted(date ? format(date, 'yyyy-MM-dd') : 'none');
      }}
      {...stylex.props(styles.form)}
    >
      <Field>
        <FieldLabel htmlFor="date-picker-form-trigger">Date of birth</FieldLabel>
        <DatePicker value={date} onValueChange={setDate}>
          <DatePickerTrigger id="date-picker-form-trigger" />
          <DatePickerContent captionLayout="dropdown" endMonth={new Date()} />
        </DatePicker>
        <FieldDescription>Used to calculate your age.</FieldDescription>
      </Field>
      <div {...stylex.props(styles.row)}>
        <Button type="submit">Submit</Button>
        {submitted && (
          <span {...stylex.props(styles.result)}>Submitted: {submitted}</span>
        )}
      </div>
    </form>
  );
}

const styles = stylex.create({
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s4,
    width: container.sm,
  },
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s3,
  },
  result: {
    color: colors.mutedForeground,
    fontSize: fontSize.sm,
  },
});

import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from '@/components/ui/date-picker';

export default function DatePickerDisabled() {
  // A fixed day rather than today, so the server and the browser render the same date.
  return (
    <DatePicker
      disabled
      defaultValue={new Date(new Date().getFullYear(), 0, 12)}
    >
      <DatePickerTrigger />
      <DatePickerContent />
    </DatePicker>
  );
}