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]);