Skip to main content

DateTimeField

DateTimeField is a versatile component allowing users to easily select dates and times. It can be configured for various modes such as date only or date-time selection, and it supports localization.

Usage

DateTimeField component can be used to capture date or date-time values from users. It supports customization for disabling the field, clearing the selection, displaying errors, and more.

Basic Usage

Provides a basic date-picker functionality where users can select a date.

import React, { useState } from "react";
import { DateTimeField } from "@firecms/ui";

export default function DateTimeFieldBasicDemo() {
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

return (
<DateTimeField
value={selectedDate}
onChange={setSelectedDate}
label="Select a date"
mode="date"
/>
);
}

Date-Time Selection

Enables selection of both date and time, suitable for scenarios where precise timing is crucial.

import React, { useState } from "react";
import { DateTimeField } from "@firecms/ui";

export default function DateTimeFieldDateTimeDemo() {
const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(new Date());

return (
<DateTimeField
value={selectedDateTime}
onChange={setSelectedDateTime}
label="Select date and time"
mode="date_time"
/>
);
}

Localization

Showcases how to localize the DateTimeField component, adjusting it for different locales.

import React, { useState } from "react";
import { DateTimeField } from "@firecms/ui";

export default function DateTimeFieldLocalizationDemo() {
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

return (
<DateTimeField
value={selectedDate}
onChange={setSelectedDate}
label="Localized Date"
mode="date"
locale="es"
/>
);
}
Sign up to our newsletter to get the latest news and updates. No spam!