| 1 |
/** |
| 2 |
* External dependencies |
| 3 |
*/ |
| 4 |
import {useFormContext, useFormState} from 'react-hook-form'; |
| 5 |
|
| 6 |
/** |
| 7 |
* Internal dependencies |
| 8 |
*/ |
| 9 |
import {AdminSectionField} from '@givewp/components/AdminDetailsPage/AdminSection'; |
| 10 |
import {formatToDateTimeLocalInput, convertLocalDateTimeToISOString} from '@givewp/admin/common'; |
| 11 |
|
| 12 |
/** |
| 13 |
* |
| 14 |
* 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. |
| 15 |
* |
| 16 |
* @since 4.13.0 |
| 17 |
*/ |
| 18 |
export default function DateTimeLocalField({name, label}: {name: string, label: string}) { |
| 19 |
const {watch, setValue} = useFormContext(); |
| 20 |
const {errors} = useFormState(); |
| 21 |
const value = watch(name); |
| 22 |
|
| 23 |
return ( |
| 24 |
<AdminSectionField error={errors[name]?.message as string}> |
| 25 |
<label htmlFor={name}>{label}</label> |
| 26 |
<input |
| 27 |
type="datetime-local" |
| 28 |
id={name} |
| 29 |
value={formatToDateTimeLocalInput(value)} |
| 30 |
onChange={(e) => { |
| 31 |
setValue(name, convertLocalDateTimeToISOString(e.target.value), { |
| 32 |
shouldDirty: true, |
| 33 |
}); |
| 34 |
}} |
| 35 |
/> |
| 36 |
</AdminSectionField> |
| 37 |
); |
| 38 |
} |
| 39 |
|
