Current File : /home/bravetechrwanda/itiministry.org/plugins/give/src/Admin/fields/DateTimeLocalField//index.tsx
/**
* External dependencies
*/
import {useFormContext, useFormState} from 'react-hook-form';
/**
* Internal dependencies
*/
import {AdminSectionField} from '@givewp/components/AdminDetailsPage/AdminSection';
import {formatToDateTimeLocalInput, convertLocalDateTimeToISOString} from '@givewp/admin/common';
/**
*
* DateTimeLocalField component that formats the date and time to a datetime-local input and is compatible with the server-side validation date-time format RFC3339 validation.
*
* @since 4.13.0
*/
export default function DateTimeLocalField({name, label}: {name: string, label: string}) {
const {watch, setValue} = useFormContext();
const {errors} = useFormState();
const value = watch(name);
return (
<AdminSectionField error={errors[name]?.message as string}>
<label htmlFor={name}>{label}</label>
<input
type="datetime-local"
id={name}
value={formatToDateTimeLocalInput(value)}
onChange={(e) => {
setValue(name, convertLocalDateTimeToISOString(e.target.value), {
shouldDirty: true,
});
}}
/>
</AdminSectionField>
);
}
