React 时间选择器

2025年3月17日 | 阅读 12 分钟

时间选择器允许用户选择任意一个时间。

时间选择器允许用户选择单个时间（以小时或分钟格式）。实心圆表示时钟末端已选定的时间。

React 应用程序的时间选择器。

它几乎支持任何语言。
只需安装 npm 即可执行 add react-time-picker 或 yarn add react-time-picker operator。
然后，通过从 'react-time-picker' 导入 TimePicker 来导入它。
我们可以通过添加 <Time Picker /> 来使用它。

注意：react-time-picker 与 react-date-picker 或 react-date time-picker 配合使用效果更佳。

开始

该项目使用 React 16.3 或更高版本。如果您使用的是旧版 React，请参考下表查找相应的 react-time-picker 版本。

React 版本	最新兼容的 react-time-picker 版本
16.3	最新
16.0	3.x

旧版浏览器

如果您想支持 Internet Explorer 10 等旧版浏览器，则需要使用 Intl.js 或 Intl polyfill 与 React-Date-Picker。

安装过程

首先，通过执行 npm install react-time-picke 和 yarn add react-time-picker 将 react-time-picker 添加到项目中。

示例 1

import react from 'react'; {useState};
import timepicker from 'react-time-picker';
function MyApp() {
    const [value, onChange] = useState('10:00');
    return (
      <div>
        <timepicker onchange={onchange} value={value} />
      </div>
    );
};

自定义样式

如果我们不从 'react-time-picker/dist/entry.nostyle' 导入 Time Picker，然后导入 react time picker；如果我们使用默认的 react time picker，它将无法正常工作。

默认输入文件加载的样式是 React-time-picker/dist/TimePicker.css 和 React-clock/dist/Clock.css。

您需要将其复制到项目中才能进行构建。

用户指南

它显示带有自定义输入、原生输入和时钟的输入字段。

属性

属性名称	描述	默认值	示例值
amPmAriaLabel	aria-label 主要用于 amPmAriaLabel 中的 AM/PM 选择。	不适用	"选择 AM/PM"
className	类名将与“react-time-picker”一起添加到父 React-Time-Picker <div> 元素。	不适用	字符串：“class1 class2” 字符串数组：“["class4", "class5 class6"]”
autoFocus	autoFocus 聚焦于输入部分。	不适用	true
clearAriaLabel	cleararia-label 用于删除按钮。	不适用	"清除值"
clockAriaLabel	aria-label 用于时钟按钮。	不适用	"切换时钟"
clearIcon	这是删除按钮的内容。将其设置为空值将隐藏图标。	（默认图标）	字符串：“清除” React 元素：<ClearIcon />
clockClassName	类名用于添加到父 React-Clock <time> 元素上的“react-clock”。	不适用	字符串：“class1 class2” 字符串数组：“["classA", "classB classc"]”
clockIcon	它用于时钟内容按钮。将其值设为 null 会隐藏图标。	（默认图标）	字符串：“时钟” React 元素：<ClockIcon />
disabled	时间选择器将被禁用。	false	true
closeClock	选择值后，它将关闭时钟。	true	false
disableClock	设置为 true 时，它会通过切换可见性来移除时钟和按钮。	false	true
hourAriaLabel	这是输入时间的 area-label。	不适用	"小时"
格式	它支持基于 Unicode 技术标准的输入格式。支持的值有：hh、m、mm、s、ss、a、H、HH、h。	不适用	"h:m:s a"
hourPlaceholder	时间输入的占位符。	"--"	"hh"
isOpen	用于打开手表功能。	false	true
locale	这是 IETF 语言标签。	用户浏览器设置	"hu-HU"
minuteAriaLabel	minuteAria-label 用于分钟输入。	不适用	"分钟"
maxDetail	可以是“hour”、“minute”或“second”。此处将使用详细选择。	"分钟"	"秒"
maxTime	用户可以在此处选择最晚时间。	不适用	日期：new Date() 字符串：“23:11:00”
minTime	用户可以在此处选择最早时间。	不适用	日期：new Date() 字符串：“12:18:00”
nativeInputAriaLabel	nativeAria-label 是一个原生时间输入。	不适用	"时间"
onChange	在用户选择有效时间时调用。	不适用	（值）=> alert('新时间是：', 值)
onClockOpen	打开时钟时使用 onClockOpen。	不适用	() => alert('时钟已打开')
onClockClose	关闭时钟时工作。	不适用	() => alert('时钟已关闭')
必需	如果需要输入日期。	false	true
secondAriaLabel	secondAria-label 用于秒输入。	不适用	"秒"
openClockOnFocus	用于在输入焦点时打开时钟。	true	false
secondPlaceholder	秒占位符主要用于秒输入。	"--"	"ss"
值	这只是我们使用的输入值。	不适用	日期：new Date() 字符串：“20:11:00”

时钟

time picker 组件将传递 react-clock 的属性，除了 clockClassName 中使用的类名。

时间选择器的类型

各种类型的时间选择器，包括下拉式、滚动式和滚轮式。时间选择器的 UI 设计帮助我们确定在 React 中使用的类型。

1. 下拉式

下拉式时间选择器是最简单的时间选择器，通常用于通过下拉格式选择小时和分钟。它不像其他时间选择器那样直观，但比传统的文本框要好，因为它允许我们选择选项，而不是让用户自行输入。这有助于澄清对所需格式的困惑。

图片由 Clue Mediator 提供

2. 滚动式

当我们使用滚动选择器时，顾名思义，用户将滚动来选择所需日期或时间信息。

图片由 Hossein 提供

滚轮式

滚轮式时间选择器模拟真实时钟，使客户更容易选择确切的时间。

它会询问时间或直观地更改滚轮上的数字，立即选择下一分钟。根据实现方式，我们可以通过多种方式更改分钟值。

一些滚轮式时间选择器在选择后显示数字（例如，小时或分钟），并有一些按钮供我们选择。这些按钮是简单的箭头，允许我们切换小时和分钟时钟箭头。

图片由 Vonovak 提供

时间选择器的实现

既然我们知道时间选择器有多么有用，您将学习如何借助 React 来创建它。本教程专注于使用 Material-UI 的时间选择器，因为它是 GitHub 上最受欢迎的 React 库。

开始之前，我们需要在系统中下载并安装 Node.js 和 npm。

创建应用

为了开始，我们需要在将要构建时间选择器的相同位置构建您的 React 应用。在 CMD 中运行以下命令

此命令会生成带有以下文件的 React 应用

安装库

在使用 Material-UI 中的时间选择器之前，我们需要安装两个库：第一个是 Material-UI 库，第二个是处理我们日期的库。

许多开发人员使用 Moment.js，因为它易于使用；然而，date-fns 的包大小只有 Moment.js（71.9 kB）的四分之一（19.5 kB），这使得 date-fns 成为一个更快的选择。

要安装库，我们必须使用 npm，它是 React 应用的默认包。

使用命令 cd time-picker 开始更改当前项目（之前安装的）的目录。

最后，在此处安装 Material-UI 和 date-fns 库

cd time selector

npm install @date-io/date-fns date-fns @mui/material @mui/lab @emotion/react @emotion/styled

创建时间选择器

现在，我们将构建一个时间选择器。您在 Material-UI 库中有许多选项可供选择

桌面日期： 它为我们的桌面选择具有合适用户界面的日期。
移动端日期： 它为移动设备选择具有合适用户界面的日期。
时间： 它是一个主要用于时间的选
日期和时间： 这是一个具有内置日期和时间功能的选择器。

现在让我们看看每个选项的实际应用

import * as React from 'react';
import stack from '@mui/material/Stack';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DateTimePicker from '@mui/lab/DateTimePicker';
import TimePicker from '@mui/lab/TimePicker';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import TextField from '@mui/material/TextField';
import MobileDatePicker from '@mui/lab/MobileDatePicker';

在此代码中，我们导入了所需的库。它包括 React 和许多时间选择器，如： (DateTimePicker, DesktopDatePicker, TimePicker, and MobileDatePicker) 来自 Material-UI 库。

代码将包括 date-fns 的适配器 (AdapterDateFns)，它处理日期，并导入有助于构建页面的格式。

export default function App() {
  const [value, setValue] = React.useState (newDate('2014-08-18T21:11:54'));
  const handleChange = (newValue) 
=> 
{
    setValue(newValue);
  };

在这里，我们定义了 app 组件，并使用 app 的默认导出函数导出它。您可以不使用 export default 定义它，然后使用 export default apps 导出它；但是，此解决方案是最简单的选项。

我们需要跟踪日期，并在每次更改后存储一个新值。如果您不跟踪更改，则在选择新时间时日期和时间将不会更新。在上面的代码中，useState() hook 初始化日期 (2014-08-18T21:11:54)，handleChange 函数将处理更改。

现在我们想要 JSX，即 JavaScript 语言语法的 React 扩展，以在此处创建一个实时选择器。

return (
    <div style={{margin: "5% 40%"}}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Stackspace={3}>
          <DesktopDatePicker
            label="Desk Date"
            inputFormat="MM/dd/yyyy"
            value={value}
            onChange={handleChange}
            renderInput={(parameters) => <TextField {...parameters} />}
          />
          <MobileDatePicker
            label="Movable Date"
            inputFormat="mm/dd/yyyy"
            value={value}
            onChange={handleChange}
            renderInput={(parameters) => <TextField {...parameters} />}
          />
          <time picker
            label = "Time"
            value={value}
            onChange={handleChange}
            renderInput={(parameters) => <TextField {...parameters} />}
          />
          <Date and time picker
            label="Date and time picker"
            value={value}
            onChange={handleChange}
            renderInput={(parameters) => <TextField {...parameters} />}
          />
        </Stack>
      </Location Provider>
    </div>
  );
}

JSX 提供了一个结构化组件，该组件使用开发者熟悉的语法进行渲染。它的外观与 HTML 相同。

上面，我们还使用 Material-UI 中的选择器模块创建了选择器，并带有用于标签、值、onChange 和 inputFormat 的适当属性，这些属性指示日期显示格式。

之后，我们使用 LocalizationProvider 将各个模块组合成单个父元素。它表明您正在使用 date-fns 库来处理日期。

最后，我们必须应用边距，以便时间选择器在网页中间对齐。这是通过将代码封装在 div 元素中并通过内联样式为其应用边距来完成的。

以下是需要放置在 src/App.js 中的代码片段，以便 App 组件在 index.js 中导出并在屏幕上显示。

import * as React from 'react';
import TextField from '@mui/material/TextField';
import stack from '@mui/material/Stack';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import TimePicker from '@mui/lab/TimePicker';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DateTimePicker from '@mui/lab/DateTimePicker';
import MobileDatePicker from '@mui/lab/MobileDatePicker';
 import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
export default function App()
 {
  const[value, setValue] = React.useState(new Date('2014-08-18T21:11:54'));
 
  const handleChange = (newValue) => {
    setValue(newValue);
  };
  come back (
    <div style={{margin: "5% 40%"}}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Stack Spacing={3}>
          <DesktopDatePicker
            label="Office date"
            inputFormat="MM/dd/yyyy"
            value={value}
            onChange={handleChange}
            renderInput={(params) => <TextField {...params} />}
          />
          <MobileDatePicker
            label="Rolling date"
            inputFormat="MM/dd/yyyy"
            value={value}
            onChange={handleChange}
            renderInput={(params) => <TextField {...params} />}
          />
          <TimePicker
            label="Time"
            value={value}
            onChange={handleChange}
            renderInput={(params) => <TextField {...params} />}
          />
          <DateTimePicker
            label="Date and time picker"
            value={value}
            onChange={handleChange}
            renderInput={(params) => <TextField {...params} />}
          />
        </stack>
      </LocalizationProvider>
    </div>
  );
}

使用 npm start 命令启动应用程序，并在浏览器中导航到 URL https://:3000/。

样式化时间选择器

大多数组织都有自己希望添加到时间选择器的品牌，因此 Material-UI 允许您添加两个导入来为页面添加任何主题。一个导入允许我们创建和应用主题，另一个允许我们添加任何特定颜色。

要开始样式化时间选择器，请在 src/App.js 文件的顶部添加以下导入

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { purple } from '@mui/material/colors';

接下来，我们必须为您的组件创建一个主题（通过 createTheme 函数）。在示例中，我们将重点关注排版和颜色，但我们可以根据需要自定义时间选择器。

我们需要在 src/App.js 文件中的导入和 app 组件之间添加以下代码来创建主题

const theme = createTheme({
  typography: {
    fontSize: 12,
    fontFamily: "Segoe, Helvetica, Arial, Sans Serif UI",
  },
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: '#f44336',
    },
  },
});

样式过程的最后一步是我们将主题应用于组件。为此，我们需要用 ThemeProvider 元素包装 div 元素并将主题传递给它。

<ThemeProvider theme={theme}>
      <div style={{margin: "5% 40%"}}>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <Stack Spacing={3}>
            <DesktopDatePicker
              label="Office date"
              inputFormat="MM/dd/yyyy"
              value={value}
              onChange={handleChange}
              renderInput={(params) => <TextField {...params} />}
            />
            <MobileDatePicker
              label="Rolling date"
              inputFormat="MM/dd/yyyy"
              value={value}
              onChange={handleChange}
              renderInput={(params) => <TextField {...params} />}
            />
            <TimePicker
              label="Time"
              value={value}
              onChange={handleChange}
              renderInput={(params) => <TextField {...params} />}
            />
            <DateTimePicker
              label="Date and time picker"
              value={value}
              onChange={handleChange}
              renderInput={(params) => <TextField {...params} />}
            />
          </stack>
        </LocalizationProvider>
      </div>
    </ThemeProvider>

代码将 createTheme() 函数中选择的参数应用到网站的主题。

时间选择器的基本用法

时间选择器在移动设备上渲染为模态对话框，在桌面设备上则使用带弹出窗口的文本框。

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
default export function BasicTimePicker() {
   const [value, setValue] = React.useState(null);
    return (
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <time picker
          label="Basic example"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          };
}
          renderInput={(parameters) => <TextField {...parameters} />}
        />
      </Location Provider>
    );
}

输出

当我们点击这里并输入 AM/PM 时间时，它将显示如下。

静态模式

可以内联读取任何时间选择器。这将允许构建自定义弹出/模态容器。

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';

export default function StaticTimePickerDemo() {
  const [value, setValue] = React.useState(new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticTimePicker
        displayStaticWrapperAs="mobile"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

输出

响应性 (Responsiveness)

时间选择器组件由运行它的设备决定。

MobileTimePicker 组件适用于小型屏幕和触摸设备。
DesktopTimePicker 组件适用于大中型设备和鼠标设备，如笔记本电脑和 PC。
默认情况下，当 @media(pointer:good) 查询匹配 timepicker 时，timePicker 组件将读取桌面版本。可以通过 desktopModeMediaQuery 属性进行自定义。

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import Stack from '@mui/material/Stack';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
export default function ResponsiveTimePickers() 
{
  const [value, setValue] = React.useState(newDate('2018-01-01T00:00:00.000Z'));
    return (
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Stackspace={3}>
          <MobileTimePicker
            label="For mobile"
            value={value}
            onChange={(newValue) => {
              setValue(newValue);
            }
}
          renderInput={(params) => <TextField {...params} />}
        />
        <DesktopTimePicker
          label="For desktop"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }
}
          renderInput={(params) => <TextField {...params} />}
        />
        <TimePicker
          value={value}
          onChange={setValue}
          renderInput={(params) => <TextField {...params} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}

输出

当我们点击手机应用时

当我们点击桌面时

表单属性

时间选择器将禁用或设置为只读。

import * as React from 'react';
import TextField from '@mui/material/TextField';
import stack from '@mui/material/Stack';
import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
default export function FormPropsTimePickers() {
  const [value, setValue] = React.useState(null);
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Stackspace={3}>
        <time picker
          tag="disabled"
          disabled
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }
}
          renderInput={(parameters) => <TextField {...parameters} />}
        />
        <time picker
          label="read-only"
          read only
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }
}
          renderInput={(parameters) => <TextField {...parameters} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}

输出

时间验证

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function TimeValidationTimePicker() {
  const [value, setValue] = React.useState(new Date('2020-01-01 12:00'));

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Stack spacing={3}>
        <TimePicker
          renderInput={(parameters) => <TextField {...parameters} />}
            value={value}
            label="miximum/minimum time"
            onChange={(newValue) => {
              setValue(newValue);
            }}
            minTime={new date (0, 0, 0, 8)}
            maxTime={new date (0, 0, 0, 18, 45)}
          />
          <time picker
            renderInput={(parameters) => <TextField {...parameters} />}
            label="Disable odd hours"
            value={value}
            onChange={(newValue) => {
              setValue(newValue);
            }
}
          shouldDisableTime={(timeValue, clockType) => {
            if (clockType === 'hours' && timeValue % 2) {
              return true;
            }
            return false;
          }
}
        />
      </Stack>
    </LocalizationProvider>
  );
}

输出

横向

import * as React from 'react';
import TextField from '@mui/material/TextField';
import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
default export function StaticTimePickerLandscape() {
    const [value, setValue] = React.useState(newDate());
    return (
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Static time picker AM PM
          orientation="landscape"
          openTo="minutes"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }
}
          renderInput={(parameters) => <TextField {...parameters} />}
        />
      </Location Provider>
  );
}

输出

子组件

一些低级子组件（ClockPicker）被导出。它们在没有包装器和外部逻辑的情况下被读取，例如蒙版输入、日期值解析和验证等。

import * as React from 'react';
import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { ClockPicker } from '@mui/x-date-pickers/ClockPicker';
default export function SubComponentsTimePickers() {
    const [date, setDate] = React.useState(newDate());
    return (
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
      </Location Provider>
  );
}

输出

第二个

秒输入用作选择准确时间点的依据。

import * as React from 'react';
import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import stack from '@mui/material/Stack';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
default export function SecondsTimePicker() {
  const [value, setValue] = React.useState(newDate());
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Stackspace={3}>
        <time picker
          ampm={false}
          openTo="hours"
          views = {['hours', 'minutes', 'seconds']}
          input format="HH:mm:ss"
          mask="__:__:__"
          label="With seconds"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }
}
          renderInput={(parameters) => <TextField {...parameters} />}
        />
        <time picker
          ampmInClock
          views={['minutes', 'seconds']}
          input format="mm:ss"
          mask="__:__"
          label="Minutes and seconds"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }
}
          renderInput={(parameters) => <TextField {...parameters} />}
        />
      </Stack>
    </Location Provider>
  );
}

输出

当我们想要秒时

当我们同时需要分钟和秒时

下一主题React.js 与 Node.js

React 时间选择器

注意：react-time-picker 与 react-date-picker 或 react-date time-picker 配合使用效果更佳。

开始

旧版浏览器

安装过程

示例 1

自定义样式

用户指南

时钟

时间选择器的类型

滚轮式

时间选择器的实现

创建应用

安装库

创建时间选择器

样式化时间选择器

时间选择器的基本用法

静态模式

响应性 (Responsiveness)

表单属性

时间验证

横向

子组件

第二个

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 时间选择器

注意：react-time-picker 与 react-date-picker 或 react-date time-picker 配合使用效果更佳。

开始

旧版浏览器

安装过程

示例 1

自定义样式

用户指南

时钟

时间选择器的类型

滚轮式

时间选择器的实现

创建应用

安装库

创建时间选择器

样式化时间选择器

时间选择器的基本用法

静态模式

响应性 (Responsiveness)

表单属性

时间验证

横向

子组件

第二个

相关帖子

1401 React JS 和 Font Awesome

React vs. Svelte

React 入门教程

React 中什么是 useState

React 中什么是 Dom

React 中的单元测试

ReactJS PropTypes

React-icons

解释 React 中的新 Context API

ReactJS 中的 Const

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器