时间选择器 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">时间&nbsp;&nbsp;</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">时间&nbsp;&nbsp;</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;
}