Date Picker

import { Box, DatePicker } from "@seed-design/react";

export default function DatePickerPreview() {
  return (
    <Box width="358px" maxWidth="100%">
      <DatePicker
        today={{ year: 2026, month: 7, day: 30 }}
        defaultValue={{ year: 2026, month: 7, day: 30 }}
      />
    </Box>
  );
}

"use client";

import {
  Box,
  ContinuousDatePicker,
  DatePicker,
  TwoMonthDatePicker,
  VStack,
  WeekDatePicker,
} from "@seed-design/react";
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
import * as React from "react";

const today = { year: 2026, month: 7, day: 30 };

const layoutOptions = [
  { value: "month", label: "한 달" },
  { value: "twoMonths", label: "두 달" },
  { value: "week", label: "한 주" },
  { value: "continuous", label: "연속" },
] as const;

type DatePickerLayout = (typeof layoutOptions)[number]["value"];

export default function DatePickerVisibleRanges() {
  const [layout, setLayout] = React.useState<DatePickerLayout>("month");

  const picker = (() => {
    switch (layout) {
      case "twoMonths":
        return <TwoMonthDatePicker today={today} />;
      case "week":
        return <WeekDatePicker today={today} />;
      case "continuous":
        return (
          <ContinuousDatePicker
            today={today}
            yearRange={{ start: 2026, end: 2027 }}
            height="full"
          />
        );
      default:
        return <DatePicker today={today} />;
    }
  })();

  return (
    <VStack gap="x6" width="full" align="center">
      <SegmentedControl
        aria-label="Date Picker 레이아웃"
        value={layout}
        onValueChange={(value) => setLayout(value as DatePickerLayout)}
      >
        {layoutOptions.map((option) => (
          <SegmentedControlItem key={option.value} value={option.value}>
            {option.label}
          </SegmentedControlItem>
        ))}
      </SegmentedControl>
      <Box
        width={layout === "twoMonths" ? "720px" : "358px"}
        height={layout === "continuous" ? "420px" : undefined}
        maxWidth="full"
      >
        {picker}
      </Box>
    </VStack>
  );
}

"use client";

import {
  Box,
  DatePicker,
  Text,
  VStack,
  type DatePickerDate,
  type DatePickerRangeValue,
} from "@seed-design/react";
import * as React from "react";

const today = { year: 2026, month: 7, day: 30 };

export default function DatePickerSelectionModes() {
  const [single, setSingle] = React.useState<DatePickerDate>(today);
  const [range, setRange] = React.useState<DatePickerRangeValue>({
    start: { year: 2026, month: 7, day: 10 },
    end: { year: 2026, month: 7, day: 13 },
  });
  const [multiple, setMultiple] = React.useState<DatePickerDate[]>([
    { year: 2026, month: 7, day: 7 },
    { year: 2026, month: 7, day: 14 },
  ]);

  return (
    <VStack gap="x8" align="center">
      <VStack gap="x2" align="center">
        <Text textStyle="t5Bold">Single</Text>
        <Box width="358px" maxWidth="100%">
          <DatePicker today={today} value={single} onValueChange={setSingle} />
        </Box>
      </VStack>
      <VStack gap="x2" align="center">
        <Text textStyle="t5Bold">Range</Text>
        <Box width="358px" maxWidth="100%">
          <DatePicker selectionMode="range" today={today} value={range} onValueChange={setRange} />
        </Box>
      </VStack>
      <VStack gap="x2" align="center">
        <Text textStyle="t5Bold">Multiple</Text>
        <Box width="358px" maxWidth="100%">
          <DatePicker
            selectionMode="multiple"
            today={today}
            value={multiple}
            onValueChange={setMultiple}
          />
        </Box>
      </VStack>
    </VStack>
  );
}

"use client";

import {
  Box,
  Text,
  TwoMonthDatePicker,
  VStack,
  excludeDates,
  rangeDayCountAtLeast,
  rangeDayCountAtMost,
  type DatePickerDate,
  type DatePickerRangeValue,
} from "@seed-design/react";
import * as React from "react";

const bookedDateKeys = new Set(["2026-07-18", "2026-07-19", "2026-07-25"]);

function toDateKey(date: DatePickerDate) {
  return `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
}

const constraints = [
  rangeDayCountAtLeast(1),
  rangeDayCountAtMost(14),
  excludeDates((date) => bookedDateKeys.has(toDateKey(date))),
];

export default function DatePickerReservation() {
  const [value, setValue] = React.useState<DatePickerRangeValue>({
    start: { year: 2026, month: 7, day: 10 },
  });

  return (
    <VStack gap="x3" align="center">
      <Box width="720px" maxWidth="100%">
        <TwoMonthDatePicker
          selectionMode="range"
          today={{ year: 2026, month: 7, day: 1 }}
          value={value}
          onValueChange={setValue}
          constraints={constraints}
          aria-label="체크인 및 체크아웃 날짜"
        />
      </Box>
      <Text>
        체크인 {toDateKey(value.start)}
        {value.end ? ` · 체크아웃 ${toDateKey(value.end)}` : " · 체크아웃을 선택하세요"}
      </Text>
      <VStack gap="x1" align="center">
        <Text textStyle="t2Regular" color="fg.neutralMuted">
          선택 구간은 체크인·체크아웃을 포함해 1~14일이어야 합니다.
        </Text>
        <Text textStyle="t2Regular" color="fg.neutralMuted">
          예약 완료일(7월 18일·19일·25일)이 포함된 구간은 선택할 수 없습니다.
        </Text>
      </VStack>
    </VStack>
  );
}

"use client";

import { Box, DatePicker, Text } from "@seed-design/react";

const prices = new Map([
  [10, "12만원"],
  [11, "9만원"],
  [12, "11만원"],
  [14, "8만원"],
]);

export default function DatePickerCustomCell() {
  return (
    <Box width="358px" maxWidth="100%">
      <DatePicker
        today={{ year: 2026, month: 7, day: 1 }}
        renderDateCellSupplement={({ date, isUnavailable }) => (
          <Box asChild maxWidth="full">
            <Text as="span" textStyle="t1Regular" color="fg.neutralMuted" maxLines={1}>
              {isUnavailable ? "선택 불가" : (prices.get(date.day) ?? "예약 가능")}
            </Text>
          </Box>
        )}
        constraints={[(date) => date.day !== 13]}
      />
    </Box>
  );
}

"use client";

import {
  Box,
  DatePicker,
  Text,
  TimePicker,
  VStack,
  type DatePickerDate,
  type TimePickerValue,
} from "@seed-design/react";
import * as React from "react";

const TODAY: DatePickerDate = { year: 2026, month: 7, day: 30 };

export default function DatePickerDateAndTime() {
  const [date, setDate] = React.useState<DatePickerDate>(TODAY);
  const [time, setTime] = React.useState<TimePickerValue>({ hour: 14, minute: 30 });

  return (
    <VStack gap="x4" align="center">
      <Box width="358px" maxWidth="100%">
        <DatePicker today={TODAY} value={date} onValueChange={setDate} />
      </Box>
      <Box width="358px" maxWidth="100%">
        <TimePicker value={time} onValueChange={setTime} />
      </Box>
      <Text>
        {date.year}.{date.month}.{date.day}. {String(time.hour).padStart(2, "0")}:
        {String(time.minute).padStart(2, "0")}
      </Text>
    </VStack>
  );
}

"use client";

import {
  ActionButton,
  Box,
  DatePicker,
  HStack,
  type DatePickerActions,
  type DatePickerDate,
} from "@seed-design/react";
import * as React from "react";

const today: DatePickerDate = { year: 2026, month: 7, day: 30 };

export default function DatePickerNavigationActions() {
  const actionsRef = React.useRef<DatePickerActions>(null);

  return (
    <Box width="358px" maxWidth="100%">
      <HStack gap="x2" marginBottom="x3">
        <ActionButton
          variant="neutralWeak"
          onClick={() => actionsRef.current?.navigateToDate(today)}
        >
          오늘로 이동
        </ActionButton>
        <ActionButton variant="neutralWeak" onClick={() => actionsRef.current?.focusDate(today)}>
          오늘에 포커스
        </ActionButton>
      </HStack>
      <DatePicker
        actionsRef={actionsRef}
        today={today}
        defaultViewDate={{ year: 2026, month: 5, day: 1 }}
      />
    </Box>
  );
}