DateInput and DateTimeInput

Collect a date, or a date and a time, through a MUI X picker.

DateInput stores a plain YYYY-MM-DD string in the local time zone — no time component and no UTC shift. DateTimeInput keeps the time part.

Example

<DateInput source="delivery_on" disablePast />
<DateTimeInput source="published_at" minDate={new Date()} />

Props

Both components accept the shared input props, plus the picker constraints below.

Name	Type	Default	Description
`source` (required)	`string`	—	Name of the field in the form record
`minDate`	`Date`	—	Earliest selectable date
`maxDate`	`Date`	—	Latest selectable date
`disableFuture`	`boolean`	`false`	Blocks every date after today
`disablePast`	`boolean`	`false`	Blocks every date before today
`shouldDisableDate`	`(date: Date) => boolean`	—	Blocks individual dates — e.g. weekends
`disabled`	`boolean`	`false`	Disables the input
`readOnly`	`boolean`	`false`	Renders the value without allowing edits

Clearing the picker stores null.

tip

The picker constraints are client-side comfort, not validation. A rule the backend also enforces belongs in validate as well, otherwise a crafted request bypasses it.

Schema mapping

format: "date" selects DateInput, format: "date-time" selects DateTimeInput, and format: "time" selects TimeInput.

{"name": "delivery_on", "type": "string", "format": "date", "nullable": true}

Python
Ruby

class Order(models.Model):
    placed_at = models.DateTimeField(auto_now_add=True)
    delivery_on = models.DateField(null=True, blank=True)

Example​

Props​

Schema mapping​

See also​

Example

Props

Schema mapping

See also