# give/4.18.0/src/Admin/fields/DateTimeLocalField/index.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 39 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Admin/fields/DateTimeLocalField/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Admin/fields/DateTimeLocalField/index.tsx
- Modified: 2025-11-05T14:00:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Admin/fields/DateTimeLocalField/index.tsx#L10-L20`.

```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>
    );
}

```