一个好用的 React 移动端日期时间选择插件 rmc-date-picker
2021-12-24 11:36:51
安装
```
npm install rmc-date-picker --save
```
示例代码如下
```
import React, {useState} from 'react';
import DatePicker from "rmc-date-picker";
import 'rmc-date-picker/assets/index.css';
import 'rmc-picker/assets/index.css';
import zhCN from 'rmc-date-picker/lib/locale/zh_CN'
/**
*
* npm install rmc-date-picker --save
* https://github.com/react-component/m-date-picker
*/
function Test(props) {
const [date, setDate] = useState(new Date())
const minDate = new Date();
// 从当前开始60天内的时间
const maxDate = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate() + 60)
function format(date) {
let mday = date.getDate();
let month = date.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
mday = mday < 10 ? `0${mday}` : mday;
return `${date.getFullYear()}-${month}-${mday} ${date.getHours()}:${date.getMinutes()}`;
}
const onDateChange = (date) => {
console.log('onChange', format(date));
setDate(date)
}
const onValueChange = (values, index) => {
console.log('onValueChange', values, index);
}
const onScrollChange = (values, index) => {
console.log('onScrollChange', values, index);
}
return (
<div>
<div>{format(date)}</div>
<DatePicker
//rootNativeProps={{'data-xx': 'yy'}}
defaultDate={date}
mode={'datetime'} /* datetime date time month year */
locale={zhCN}
maxDate={maxDate}
minDate={minDate}
onDateChange={onDateChange}
onValueChange={onValueChange}
onScrollChange={onScrollChange}
// use12Hours
/>
</div>
);
}
export default Test;
```
