Material UI 框架之 Time Picker 组件详解

person  smartzeng    watch_later 2024-10-25 22:23:42
visibility 48    class Time Picker    bookmark 专栏

Material UI 提供的 Time Picker 组件是一种便捷的时间选择器,能够帮助用户轻松选择特定时间。它适用于需要精确到小时和分钟的应用场景,例如预约系统、任务时间安排等。本文将详细介绍 Time Picker 的所有用法,涵盖其所有属性和方法,并结合不同的组件展示多种用法场景,帮助你灵活运用 Time Picker 组件。

1. 基本用法

1.1 安装依赖

确保在项目中安装了 @mui/material@mui/x-date-pickers 包:

npm install @mui/material @mui/x-date-pickers date-fns

1.2 引入和使用 Time Picker 组件

首先,创建一个简单的 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>
  );
}

在这个示例中:

  • 使用 LocalizationProviderAdapterDateFns 作为时间适配器,支持 date-fns
  • TimePicker 组件的 label 属性指定了提示标签,valueonChange 控制选择的时间。

2. 主要属性详解

2.1 valueonChange

  • value:当前选中的时间,通常是 Date 对象或 null
  • onChange:时间改变时触发的回调函数,接收一个新的 Date 对象作为参数。

示例:

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
/>

2.2 minTimemaxTime

  • 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
/>

2.3 disablePastdisableFuture

  • disablePast:禁用当前时间之前的时间选择。
  • disableFuture:禁用当前时间之后的时间选择。
<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  disablePast
/>

当设置 disablePast 时,用户只能选择当前时间及以后的时间。

2.4 shouldDisableTime

  • shouldDisableTime:允许你自定义禁用某些特定的时间。它接受一个回调函数,在选择的小时或分钟满足特定条件时返回 true
<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  shouldDisableTime={(timeValue, clockType) => clockType === 'minutes' && timeValue % 5 !== 0}
/>

在此示例中,shouldDisableTime 会禁用非 5 分钟间隔的分钟数。

2.5 ampm

  • ampm:控制是否启用 12 小时制。默认为 true,即使用 AM/PM 模式。设置为 false 则启用 24 小时制。
<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  ampm={false} // 24 小时制
/>

3. 结合其他属性和事件处理

3.1 views

views 属性用于控制用户可以选择的时间单位,支持 ['hours', 'minutes', 'seconds']

<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  views={['hours', 'minutes']} // 仅支持选择小时和分钟
/>

在该示例中,TimePicker 只允许用户选择小时和分钟。

3.2 openTo

  • openTo:设置初始打开时默认显示的选择项。
<TimePicker
  label="选择时间"
  value={selectedTime}
  onChange={(newValue) => setSelectedTime(newValue)}
  openTo="minutes" // 初始时打开分钟选择
/>

设置 openTominutes,当用户打开选择器时直接展示分钟选择。

4. 高级用法:国际化和自定义适配器

4.1 国际化支持

通过 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>
  );
}

4.2 使用 Moment.js 适配器

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>
  );
}

5. 结合其他组件的使用

5.1 与表单组合

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 与表单中的按钮一起使用,以便提交选择的时间。

5.2 与 Grid 布局结合

使用 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 布局组件可以将两个时间选择器并排展示,适合需要选择时间范围的场景。

6. 总结

Time Picker 是 Material UI 提供的强大且灵活的时间选择组件。通过详细配置其属性和方法,可以自定义其

显示效果和功能。结合 Grid 等布局组件和其他表单元素,Time Picker 能在实际应用中提供更加友好和高效的用户体验。

chat评论区
评论列表
menu