Material UI 提供的 Time Picker
组件是一种便捷的时间选择器,能够帮助用户轻松选择特定时间。它适用于需要精确到小时和分钟的应用场景,例如预约系统、任务时间安排等。本文将详细介绍 Time Picker
的所有用法,涵盖其所有属性和方法,并结合不同的组件展示多种用法场景,帮助你灵活运用 Time Picker
组件。
确保在项目中安装了 @mui/material
和 @mui/x-date-pickers
包:
npm install @mui/material @mui/x-date-pickers date-fns
首先,创建一个简单的 Time Picker
组件:
import React, { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
export default function BasicTimePicker() {
const [selectedTime, setSelectedTime] = useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
/>
</LocalizationProvider>
);
}
在这个示例中:
LocalizationProvider
和 AdapterDateFns
作为时间适配器,支持 date-fns
。TimePicker
组件的 label
属性指定了提示标签,value
和 onChange
控制选择的时间。value
和 onChange
value
:当前选中的时间,通常是 Date
对象或 null
。onChange
:时间改变时触发的回调函数,接收一个新的 Date
对象作为参数。示例:
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
/>
minTime
和 maxTime
minTime
:指定用户可以选择的最小时间。maxTime
:指定用户可以选择的最大时间。此属性适合用于限制时间范围,比如一个餐厅的预约时间。
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
minTime={new Date(0, 0, 0, 9, 0)} // 最早 9:00
maxTime={new Date(0, 0, 0, 18, 0)} // 最晚 18:00
/>
disablePast
和 disableFuture
disablePast
:禁用当前时间之前的时间选择。disableFuture
:禁用当前时间之后的时间选择。<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
disablePast
/>
当设置 disablePast
时,用户只能选择当前时间及以后的时间。
shouldDisableTime
shouldDisableTime
:允许你自定义禁用某些特定的时间。它接受一个回调函数,在选择的小时或分钟满足特定条件时返回 true
。<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
shouldDisableTime={(timeValue, clockType) => clockType === 'minutes' && timeValue % 5 !== 0}
/>
在此示例中,shouldDisableTime
会禁用非 5 分钟间隔的分钟数。
ampm
ampm
:控制是否启用 12 小时制。默认为 true
,即使用 AM
/PM
模式。设置为 false
则启用 24 小时制。<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
ampm={false} // 24 小时制
/>
views
views
属性用于控制用户可以选择的时间单位,支持 ['hours', 'minutes', 'seconds']
。
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
views={['hours', 'minutes']} // 仅支持选择小时和分钟
/>
在该示例中,TimePicker
只允许用户选择小时和分钟。
openTo
openTo
:设置初始打开时默认显示的选择项。<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
openTo="minutes" // 初始时打开分钟选择
/>
设置 openTo
为 minutes
,当用户打开选择器时直接展示分钟选择。
通过 LocalizationProvider
提供的 locale
属性可实现国际化支持。以下是将 TimePicker
设置为中文的示例:
import { zhCN } from 'date-fns/locale';
export default function ChineseTimePicker() {
const [selectedTime, setSelectedTime] = useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDateFns} locale={zhCN}>
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
/>
</LocalizationProvider>
);
}
TimePicker
也支持使用 Moment.js
作为日期库:
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
export default function MomentTimePicker() {
const [selectedTime, setSelectedTime] = useState(null);
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
/>
</LocalizationProvider>
);
}
TimePicker
可以和其他表单组件结合使用。以下是一个简易的表单示例:
import { Button } from '@mui/material';
export default function TimePickerForm() {
const [selectedTime, setSelectedTime] = useState(null);
const handleSubmit = (event) => {
event.preventDefault();
alert(`Selected Time: ${selectedTime}`);
};
return (
<form onSubmit={handleSubmit}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<TimePicker
label="选择时间"
value={selectedTime}
onChange={(newValue) => setSelectedTime(newValue)}
/>
</LocalizationProvider>
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
</form>
);
}
此示例展示了如何将 TimePicker
与表单中的按钮一起使用,以便提交选择的时间。
使用 Grid
布局组件可以创建更具响应性的时间选择布局:
import Grid from '@mui/material/Grid';
export default function TimePickerWithGrid() {
const [startTime, setStartTime] = useState(null);
const [endTime, setEndTime] = useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Grid container spacing={2}>
<Grid item xs={6}>
<TimePicker
label="开始时间"
value={startTime}
onChange={(newValue) => setStartTime(newValue)}
/>
</Grid>
<Grid item xs={6}>
<TimePicker
label="结束时间"
value={endTime}
onChange={(newValue) => setEndTime(newValue)}
/>
</Grid>
</Grid>
</LocalizationProvider>
);
}
在该示例中,通过 Grid
布局组件可以将两个时间选择器并排展示,适合需要选择时间范围的场景。
Time Picker
是 Material UI 提供的强大且灵活的时间选择组件。通过详细配置其属性和方法,可以自定义其
显示效果和功能。结合 Grid
等布局组件和其他表单元素,Time Picker
能在实际应用中提供更加友好和高效的用户体验。