56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useStore } from '@tanstack/react-form';
|
|
import { FieldDescription, FieldLabel } from '@/components/ui/field';
|
|
import {
|
|
FormField,
|
|
FormFieldError,
|
|
FormFieldSet,
|
|
createFormField,
|
|
useFieldContext
|
|
} from '@/components/ui/form-context';
|
|
import { CrmDateInput } from '@/features/crm/components/crm-form-controls';
|
|
|
|
interface DatePickerFieldProps {
|
|
label: string;
|
|
description?: string;
|
|
required?: boolean;
|
|
placeholder?: string;
|
|
disabled?: (date: Date) => boolean;
|
|
}
|
|
|
|
export function DatePickerField({
|
|
label,
|
|
description,
|
|
required,
|
|
placeholder = 'DD/MM/YYYY',
|
|
disabled
|
|
}: DatePickerFieldProps) {
|
|
void disabled;
|
|
const field = useFieldContext();
|
|
const value = useStore(field.store, (s) => s.value) as string | null | undefined;
|
|
|
|
return (
|
|
<FormFieldSet>
|
|
<FormField>
|
|
<FieldLabel htmlFor={field.name}>
|
|
{label}
|
|
{required && ' *'}
|
|
</FieldLabel>
|
|
<CrmDateInput
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={(nextValue) => {
|
|
field.handleChange(nextValue);
|
|
field.handleBlur();
|
|
}}
|
|
/>
|
|
{description && <FieldDescription>{description}</FieldDescription>}
|
|
</FormField>
|
|
<FormFieldError />
|
|
</FormFieldSet>
|
|
);
|
|
}
|
|
|
|
export const FormDatePickerField = createFormField(DatePickerField);
|