2021/03/15
antd日期元件 DatePicker
使用方式：<DatePicker /> 報錯 原因：沒有給picker屬性賦值，這個元件一定要加上picker屬性，儘管它預設是date，但依舊要寫上去
picker有5個可選值：date | week | month | quarter | year，分別對應：日期|周|月|季度|年
而且他有個屬性：format格式化日期的，設定了沒有效果，這個元件返回來的值會帶有T和Z；
百度：T是代表後面跟著“時間”。Z代表0時區，這是UTC統一時間。
你需要在把資料設定給form表單的邏輯中將該元件的返回值手動格式化，簡而言之自己寫邏輯格式化；
想將資料顯示在該元件上，寫成'2012-02-02 00:00:00'這樣也是會報錯的，該元件不能傳入字串型別的值，可以通過一個方法moment來實現：
下載moment.js，並匯入當前目錄下，這個moment是格式化時間用的，
當你點選彈出框時，因為彈出框的日期元件不能接收字串值，所以在點選彈出框時給對應的日期的值賦值成moment的資料，具體看一下程式碼：

import moment from 'moment'; // 匯入moment

const [treeData, setTreeData] = useState({});
useEffect(() => { // 同步父元件過來的 屬性
setTreeData({ ...props.values, transdate: moment(props.values.transdate) }) // 在這裡初始化moment的值
}, [props.values]);

// 設定初始資料
form.setFieldsValue(treeData);

為什麼要初始化moment值，因為在使用日期元件時，你點選編輯按鈕將值傳遞給日期元件，你的值為字串型別，但該元件不接受字串型別，故而報錯，有兩種解決辦法：
1、引入moment，使用它封裝的邏輯將你的字串日期值轉發成標準的日期值（含有時區和時間），這種標準的日期值才能被日期元件所接收；
2、直接在將日期值傳遞給日期元件時將其初始化，比如在同步父元件資料方法中令日期值（）直接為空，這也是可以被日期元件所接受的：
useEffect(() => { // 同步父元件過來的 屬性
setTreeData({ ...props.values, transdate: '' }) // 令日期值為空
}, [props.values]);