rhf

RHF Date Range Picker

React Hook Form wrapper cho DateRangePicker với hỗ trợ validation và error handling tích hợp.

1. Import

Import the RHF Date Range Picker component from the design system.

import { RHFDateRangePicker } from "@/design-system/components/rhf";

2. Props

RHF Date Range Picker component props.

Prop	Type	Default
control	Control<T>	--
name	Path<T>	--
callback	(value: { from?: Date; to?: Date } \| undefined) => void	--
label	string \| React.ReactNode	--
required	boolean	false
error	string	--
className	string	--

3. Usages

Các pattern và cấu hình RHFDateRangePicker phổ biến.

Date Range

import { RHFDateRangePicker } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";

function Example() {
  const { control } = useForm({
    defaultValues: {
      dateRange: undefined,
    },
  });

  return (
    <RHFDateRangePicker
      control={control}
      name="dateRange"
      label="Date Range"
      placeholder={{ from: 'From date', to: 'To date' }}
    />
  );
}