Date Picker

import { DatePicker } from "@ellie-ui/core";
import { useDatePicker } from "@ellie-ui/core/hooks";

export const Example = () => {
    const datePicker = useDatePicker();

    return <DatePicker value={datePicker.value} onValueChange={datePicker.onValueChange} />
}

import { DateRangePicker } from "@ellie-ui/core";
import { useDateRangePicker } from "@ellie-ui/core/hooks";

export const Example = () => {
    const dateRangePicker = useDateRangePicker();

    return <DateRangePicker value={dateRangePicker.value} onValueChange={dateRangePicker.onValueChange} />
}

export const DatePickerDemoWithPlaceholder = () => {
  const datePicker = useDatePicker();

  return (
    <DatePicker
      className="w-[20rem]"
      value={datePicker.value}
      onValueChange={datePicker.onValueChange}
      placeholder="날짜를 선택해주세요"
    />
  );
};

import { DatePicker } from "@ellie-ui/core";
import { useDatePicker } from "@ellie-ui/core/hooks";

export const Example = () => {
    const datePicker = useDatePicker();

    return <DatePicker value={datePicker.value} onValueChange={datePicker.onValueChange} disabled />
}

import { DatePicker } from "@ellie-ui/core";
import { useDatePicker } from "@ellie-ui/core/hooks";

export const Example = () => {
    const datePicker = useDatePicker();

    return <DatePicker value={datePicker.value} onValueChange={datePicker.onValueChange} hidden={{ before: new Date() }} />
}

import { Button, Form, DatePicker } from "@ellie-ui/core";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const DateForm = z.object({
  date: z.date({ message: "날짜를 선택해주세요." }),
});

export const DatePickerDemoWithForm = () => {
  const form = useForm({
    resolver: zodResolver(DateForm),
    defaultValues: {
      date: undefined,
    },
  });

  const onSubmit = form.handleSubmit(() => {});

  return (
    <Form>
    <Controller
      name="date"
      control={form.control}
      render={({ field: { value, onChange, ...rest }, fieldState }) => (
        <Form.Field invalid={fieldState.invalid}>
          <Form.Label>날짜</Form.Label>
          <Form.Control>
            <DatePicker placeholder="날짜를 선택해주세요" value={value} onValueChange={onChange} {...rest} />
          </Form.Control>
          <Form.Description>날짜를 선택해주세요.</Form.Description>
          <Form.ErrorMessage>{fieldState.error?.message}</Form.ErrorMessage>
        </Form.Field>
      )}
    />
    <Button className="mt-4" type="submit">
      제출하기
    </Button>
  </Form>
  );
};