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 range fields

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

Customize the start and end fields differently

You can pass conditional props to the textField slot to customize the input styling based on the position.

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 separator of range fields

You can use the dateSeparator prop to change the separator rendered between the start and end dates:

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.

With Material UI

Wrapping PickersTextField

You can import the PickersTextField component to create custom wrappers:

Using Material TextField

Pass the enableAccessibleFieldDOMStructure={false} to any Field or Picker component to use an <input /> for the editing instead of the new accessible DOM structure:

With another Design System

Using a custom input

Using Joy UI

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

With a custom editing experience

Using an Autocomplete

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

Using a masked Text Field

If you want to use a simple mask approach for the field editing instead of the built-in logic, you can replace the default field with the TextField component using a masked input value built with the rifm package.

Using a read-only Text Field

If you want users to select a value exclusively through the views but you still want the UI to look like a Text Field, you can replace the field with a read-only Text Field component:

Using a Button

If you want users to select a value exclusively through the views and you don't want the UI to look like a Text Field, you can replace the field with the Button component:

The same logic can be applied to any Range Picker:

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <PickersSectionList />
• <PickersTextField />