時間選擇器 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;
}