时间选择器 DatePicker antd
时间选择器 DatePicker
前言
最近做了需要用到时间选择器的项目,用到了DatePicker,特此来记录下
首先先贴出官网连接:
ant Mobile:https://antd-mobile-doc-v2.gitee.io/components/date-picker-cn/
antd:https://ant-design.gitee.io/components/date-picker-cn/#header
一、antMobile版本
1.图示
版本号: "antd-mobile": "^2.3.4",
2.js(部分)
时间传递格式:Wed Oct 20 2021 15:51:11 GMT+0800 (中国标准时间)
import { DatePicker } from 'antd-mobile';
const nowTimeStamp = Date.now();//1626058612777当前时间戳
const now = new Date(nowTimeStamp);//Mon Jul 12 2021 10:57:17 GMT+0800 (中国标准时间) {} 当前时间
constructor(options) {
super(options);
this.state = {
date: now,//时间
change: false,//是否选择了时间
}
}
{/* 日期 */ }
<div className="tr">
<div className="title">时间 </div>
<div className="content">
<DatePicker
value={this.state.date}
onChange={date => this.setState({ date: date, change: true })}
//date格式:Wed Oct 20 2021 15:51:11 GMT+0800 (中国标准时间)
title="请选择日期"
>
<List.Item style={{ color: this.state.change ? '#000' : '#757575' }}></List.Item>
</DatePicker>
</div>
</div>
3.css
/* 日期选择器 */
.table .tr .content .am-list-item .am-list-line .am-list-extra {
width: 62%;
height: 16px;
padding: 3px 4px;
border: 1px solid #000;
background-color: #fff;
}
4.问题
低版本的antMobile不支持18以上的react,但是目前antMobile页不新,会有生命周期冲突问题,所以一般不用
二、antd
1.图示
版本号:"antd": "^4.16.7",
2.js代码(部分)
时间传递格式:Moment变量
时间显示格式:2021-10-06 15:11:15
import { DatePicker } from 'antd';
import moment from "moment";
import { ConfigProvider } from "antd";
import 'moment/locale/zh-cn';
import locale from 'antd/lib/locale/zh_CN'
this.state = {
wrongTime: ""//异常时间
}
// 修改时间
ChangeDate(value, dateString) {
this.setState({
//wrongTime: moment(dateString)
wrongTime:value
})
}
// 提交表单信息 若没有手动选择时间,则默认上传进入页面的时间
handlerSubmit = (e) => {
let { wrongTime } = this.state
wrongTime = wrongTime ? wrongTime.format("YYYY-MM-DD HH:mm:ss") : moment().format("YYYY-MM-DD HH:mm:ss")// 若没有手动选择时间,则默认上传提交的时间 现在提交的时间是format格式
}
{/* 日期 如果没有手动选择,默认就是进来页面的时间*/ }
<div className="tr">
<div className="title">时间 </div>
<div className="content">
<ConfigProvider locale={locale}>
<DatePicker
showTime
onChange={this.ChangeDate.bind(this)}
placeholder={moment().format("YYYY-MM-DD HH:mm:ss")}
inputReadOnly={true}
value={this.state.wrongTime}
/>
</ConfigProvider>
</div>
</div>
3.css代码
@import '~antd/dist/antd.css';
/* 日期选择器 */
.ant-picker {
padding: 0 1px;
width:84%;
border: 1px solid #000;
border-radius: 0;
}
.table .tr .content .ant-picker .ant-picker-input input {
border: none;
}
.table .tr .content .ant-picker .ant-picker-input span {
display: none;
}
/* 日期选择 */
/* 左边 */
.ant-picker-date-panel {
width: 255px;
}
/* 左边的下面(数字的最大盒子) */
.ant-picker-date-panel .ant-picker-body {
padding: 0;
}
/* 右边的三根柱子 */
.ant-picker-time-panel .ant-picker-content .ant-picker-time-panel-column {
width: 30px;
}
/* 柱子里的每个方格 */
.ant-picker-time-panel .ant-picker-content .ant-picker-time-panel-column .ant-picker-time-panel-cell{
text-align: center;
}
/* 右边的最小的方格 */
.ant-picker-time-panel .ant-picker-content .ant-picker-time-panel-column .ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner{
padding:0;
}