zod-form-radix/dist/components/fields/DateField.js

Radix UI integration for zod-form-kit

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// React import not needed with new JSX transform
import { Input } from '../input';
import { Label } from '../label';
import { cn } from '../../lib/utils';
export function DateField({ name, label, value = null, onChange, error, required, options = {}, className = '' }) {
    const { format = 'date', min, max } = options;
    // Convert Date to string format for input
    const formatDateForInput = (date) => {
        if (!date)
            return '';
        switch (format) {
            case 'datetime-local':
                return date.toISOString().slice(0, 16);
            case 'time':
                return date.toTimeString().slice(0, 5);
            case 'date':
            default:
                return date.toISOString().split('T')[0];
        }
    };
    // Convert string input to Date
    const parseInputDate = (value) => {
        if (!value)
            return null;
        const date = new Date(value);
        return isNaN(date.getTime()) ? null : date;
    };
    const handleChange = (e) => {
        const newDate = parseInputDate(e.target.value);
        onChange(newDate);
    };
    return (_jsxs("div", { className: cn("space-y-2", className), children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), _jsx(Input, { id: name, name: name, type: format, value: formatDateForInput(value), onChange: handleChange, className: cn(error && "border-red-500 focus-visible:ring-red-500"), required: required, min: min, max: max }), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}