Skip to content
+

Date Time Field

The Date Time Field component lets users select a date and a time with the keyboard.

Basic usage

MM/DD/YYYY hh:mm aa
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';

export default function BasicDateTimeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimeField']}>
        <DateTimeField label="Basic date time field" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

04/17/2022 03:30 PM
04/17/2022 03:30 PM

Localization

See the Date format and localization and Translated components documentation pages for more details.

Customize the date time format

04/17/2022 03:30 pm
04/17/2022 15:30
April 17, 2022 03:30 PM

Validation

See the Validation documentation page for more details.

API

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