Material UI in React [ Day 11] Date & Time picker 日期时间输入

Date / Time pickers

可以透过官方文件知道有两种做法,一种是利用原生 input type = "date", "time", "datetime" 的属性,直接下在 TextField 组件里面,作法就和前面的章节提及的一致。

<TextField
  id="date"
  label="Birthday"
  type="date"
  defaultValue="2017-05-24"
  InputLabelProps={{
  shrink: true,
  }}
/>
<TextField
  id="datetime-local"
  label="Next appointment"
  type="datetime-local"
  defaultValue="2017-05-24T10:30"
  InputLabelProps={{
    shrink: true,
  }}
/>
<TextField
  id="time"
  label="Alarm clock"
  type="time"
  defaultValue="07:30"
  InputLabelProps={{
    shrink: true,
  }}
  inputProps={{
    step: 300, // 5 分钟一个tick
  }}
/>

另一种则需要导入@material-ui/pickers的套件,详细可以透过官方文件查询,首先先安装此套件:

npm i @material-ui/pickers
yarn add @material-ui/pickers

再来需要用到时间管理的套件,可以选择自己喜欢的就行,官方文件有提供以下四种:

npm i @date-io/[email protected] date-fns
// or
npm i @date-io/[email protected] moment
// or
npm i -s @date-io/[email protected] luxon
// or
npm i -s @date-io/[email protected] dayjs

主要是因为他会用到基於 React Context,概念的 custom provider:

import {
  MuiPickersUtilsProvider,
  DatePicker,
  TimePicker,
  DateTimePicker,
} from '@material-ui/pickers';

// pick a date util library
import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker value={selectedDate} onChange={handleDateChange} />
      <TimePicker value={selectedDate} onChange={handleDateChange} />
      <DateTimePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Date picker

透过 autoOk,可以将确认按钮收起来,format 则是修改显示的格式,KeyboardDatePicker的话在栏位中会多出一个icon button,其余的应用详见该官网

import React, { Fragment, useState } from "react";
import { DatePicker, KeyboardDatePicker } from "@material-ui/pickers";

function BasicDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
      />

      <DatePicker
        autoOk
        label="Clearable"
        clearable
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DatePicker
        disableFuture
        openTo="year"
        format="dd/MM/yyyy"
        label="Date of birth"
        views={["year", "month", "date"]}
        value={selectedDate}
        onChange={handleDateChange}
      />
      <KeyboardDatePicker
        clearable
        value={selectedDate}
        placeholder="10/10/2018"
        onChange={date => handleDateChange(date)}
        minDate={new Date()}
        format="MM/dd/yyyy"
      />
    </Fragment>
  );
}

export default BasicDatePicker;

Time Picker

时间的话会多出一个时钟的选择框,那麽他则可以针对不同小时制去做更改,step则可以限定他分针跳动时候的最小单位,其余应用的部分我也放在这里

import React, { Fragment, useState } from "react";
import { TimePicker } from "@material-ui/pickers";

function BasicTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <TimePicker autoOk label="12 hours" value={selectedDate} onChange={handleDateChange} />

      <TimePicker
        clearable
        ampm={false}
        label="24 hours"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <TimePicker
        showTodayButton
        todayLabel="now"
        label="Step = 5"
        value={selectedDate}
        minutesStep={5}
        onChange={handleDateChange}
      />
    </Fragment>
  );
}

export default BasicTimePicker;

Date Time Picker

这个部分则为上述两者的综合体,这里我就不再多加描述了,详细应用请至这里查询细节应用。

<DateTimePicker
    label="DateTimePicker"
    inputVariant="outlined"
    value={selectedDate}
    onChange={handleDateChange}
  />

  <DateTimePicker
    autoOk
    ampm={false}
    disableFuture
    value={selectedDate}
    onChange={handleDateChange}
    label="24h clock"
  />

  <DateTimePicker
    value={selectedDate}
    disablePast
    onChange={handleDateChange}
    label="With Today Button"
    showTodayButton
  />

那麽今天的内容就先到这里,明天会接续讲解 Select 组件的部分。


<<:  [Day 4] SRE - 保持精简的监控

>>:  [Day3] 引擎简介 - RPG Maker 引入插件

Day2 XAMPP 环境准备

学习PHP前的准备,就是开发环境与执行环境的部署,就像上学前要先准备铅笔、课本、背包,最重要的是一颗...

[Day 05] tinyML与卷积神经网路(CNN)

在说完了神经元和神经网路後,接下来要介绍深度学习(Deep Learning, DL)了。在上篇Fi...

寻觅 webpack - 29 - 解构 webpack - 自己动手写 webpack

本系列已集结成书从 0 到 Webpack:学习 Modern Web 专案的建置方式,这是一本完...

用自己方式存在的工程师 - TonyQ [中]

Bernard:有人说,当一个工程师,就要不断的学习。但现在可以学、要学的东西这麽多,单是前端框架就...

Week36 - 用 Apollo 快速架设 GraphQL Server [Server的终局之战系列]

大家好,GraphQL 是一个可以让 Client 弹性要求资料的技术,本文章将介绍Apollo S...