可以透过官方文件知道有两种做法,一种是利用原生 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'));
透过 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;
时间的话会多出一个时钟的选择框,那麽他则可以针对不同小时制去做更改,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;
这个部分则为上述两者的综合体,这里我就不再多加描述了,详细应用请至这里查询细节应用。
<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 组件的部分。
>>: [Day3] 引擎简介 - RPG Maker 引入插件
学习PHP前的准备,就是开发环境与执行环境的部署,就像上学前要先准备铅笔、课本、背包,最重要的是一颗...
在说完了神经元和神经网路後,接下来要介绍深度学习(Deep Learning, DL)了。在上篇Fi...
本系列已集结成书从 0 到 Webpack:学习 Modern Web 专案的建置方式,这是一本完...
Bernard:有人说,当一个工程师,就要不断的学习。但现在可以学、要学的东西这麽多,单是前端框架就...
大家好,GraphQL 是一个可以让 Client 弹性要求资料的技术,本文章将介绍Apollo S...