Custom field

The Date and Time Pickers let you customize the field by passing props or custom components

Customize the default field

Customize the TextField

You can use the textField slot to pass custom props to the TextField:

Customize the separator of multi input fields

You can use the fieldSeparator slot to pass custom props to the Typography rendered between the two TextField:

Use single input fields on range pickers

You can pass the single input fields to the range picker to use it for keyboard editing:

If you want to create a wrapper around the field, make sure to set the fieldType static property to 'single-input'. Otherwise, the picker won't know your field is a single input one and use the multi input event listeners:

You can manually add an endAdornment if you want your range picker to look exactly like on a simple picker:

Change the format density

You can control the field format spacing using the formatDensity prop. Setting formatDensity to "spacious" will add a space before and after each /, - and . character.

Commonly used custom field

Using another input

With the Joy input

You can use the Joy UI components instead of the Material UI ones:

With the browser input

You can also use any other input:

Using an Autocomplete

If your user can only select a value in a small list of available dates, you can replace the field with an Autocomplete listing those dates:

Using a Button

If you only want to allow the user to pick a value through the views, you can replace the field with a Button:

How to build a custom field

The main challenge when building a custom field, is to make sure that all the relevant props passed by the pickers are correctly handled.

On the examples below, you can see that the typing of the props received by a custom field always have the same shape:

interface JoyDateFieldProps
  extends UseDateFieldProps<Dayjs>, // The headless field props
    BaseSingleInputFieldProps<Dayjs | null, FieldSection, DateValidationError> {} // The DOM field props

interface JoyDateTimeFieldProps
  extends UseDateTimeFieldProps<Dayjs>, // The headless field props
    BaseSingleInputFieldProps<Dayjs | null, FieldSection, DateTimeValidationError> {} // The DOM field props

The headless field props

This interface depends on which type of field you are building (UseDateField for date field, UseTimeField for a time field, UseDateRangeFieldProps for a date range field, etc.).

It contains:

• the basic props common to all the fields (value, onChange, format, readOnly, etc.)
• the validation props for this type of field (minDate, maxDate, shouldDisableDate, etc.)

The DOM field props

This interface contains the props the pickers pass to its field in order to customize the rendering.

These props are shaped to be received by the built-in fields which are using the TextField from @mui/material. When used with another type of input (or no input at all), you will have to manually pass them to the relevant component.

You can have a look at the BaseSingleInputFieldProps and BaseMultiInputFieldProps interfaces to know exactly what those interfaces contain.