ObjectUIFields
DateTime Field
Date and time input with combined picker
The DateTime Field component provides a combined date and time input for collecting both date and time information in a single field.
Basic Usage
Basic DateTime Field
{
"type": "datetime",
"name": "meeting_time",
"label": "Meeting Time",
"placeholder": "Select date and time..."
}With Default Value
With Default Value
{
"type": "datetime",
"name": "scheduled_at",
"label": "Scheduled At",
"value": "2024-03-15T14:30"
}Required Field
Required DateTime
{
"type": "datetime",
"name": "appointment",
"label": "Appointment",
"required": true
}Read-Only
Read-Only DateTime
{
"type": "datetime",
"name": "created_at",
"label": "Created At",
"value": "2024-03-15T10:30",
"readonly": true
}Field Schema
interface DateTimeFieldSchema {
type: 'datetime';
name: string; // Field name/ID
label?: string; // Field label
placeholder?: string; // Placeholder text
value?: string; // Default value (ISO 8601 format)
required?: boolean; // Is field required
readonly?: boolean; // Read-only mode
disabled?: boolean; // Disabled state
className?: string; // Additional CSS classes
// Validation
format?: string; // Display format
min_date?: string | Date; // Minimum date/time
max_date?: string | Date; // Maximum date/time
}Date Format
The datetime field stores values in ISO 8601 format: YYYY-MM-DDTHH:mm
Example: 2024-03-15T14:30 represents March 15, 2024 at 2:30 PM
Cell Renderer
When used in data tables or grids:
import { DateTimeCellRenderer } from '@object-ui/fields';
// Renders: Mar 15, 2024, 02:30 PMUse Cases
- Event Scheduling: Meeting times, appointments
- Timestamps: Order placed, task deadline
- Booking Systems: Reservation date and time
- Notifications: Scheduled notification time