Date/Time pickers日期/时间选择器

日期选择器和时间选择器提供了一个从事先设定好的日期集合中选择单个值的简单方法。

• 在移动端，选择器最适合在确认对话框中展示。
• 若是内联显示，如在一个表单内展示，请考虑使用分段下拉按钮这样的紧凑型控件。

React 组件

日期选择器

⚠️ 浏览器支持的原生输入控件并不是完美的。

示例展示了当 type="date" 时的原生的日期选择器 。

• date-fns
• Day.js
• Luxon
• 时间选择器

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install -s @date-io/dayjs
// or for Luxon
npm install -s @date-io/luxon
// or for Moment.js
npm install @date-io/moment

这个例子通过 type="datetime-local" 实现了原生的日期和时间选择器。

// date-fns
import DateAdapter from '@mui/lab/AdapterDateFns';
// or for Day.js
import DateAdapter from '@mui/lab/AdapterDayjs';
// or for Luxon
import DateAdapter from '@mui/lab/AdapterLuxon';
// or for Moment.js
import DateAdapter from '@mui/lab/AdapterMoment';

function App({ children }) {
  return (
    <LocalizationProvider dateAdapter={DateAdapter}>{children}</LocalizationProvider>
  );
}

原生的选择器

⚠️ 浏览器原生输入控件并不完美。

这个例子通过 type="time" 实现了原生的时间选择器。

API

• <DatePicker />
• <DateTimePicker />
• <TextField />
• <TimePicker />