datepicker.jpg
上圖是我代碼應(yīng)用場景恃锉，選中時(shí)間后,從移動應(yīng)用tab切換至瀏覽器tab的時(shí)候清空所選的時(shí)間value值
官網(wǎng)是有這種格式的如下：
<RangePicker
defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)] />
moment里面是第一項(xiàng)是他的value值僻他，我在項(xiàng)目中將它設(shè)置成一個(gè)變量了怕膛，這樣便于控制
//提前在state中設(shè)置狀態(tài)
this.state={
startTime:undefined,//開始時(shí)間
endTime:undefined, //結(jié)束時(shí)間
}
<RangePicker
onChange={this.onPickerChange}
value=[moment(this.state.startTime, dateFormat), moment(this.state.endTime,dateFormat)]
format={dateFormat}
placeholder={['開始時(shí)間','結(jié)束時(shí)間']}
/>
如果這樣寫的話，就會因?yàn)椴环蟤oment的格式報(bào)NAN的錯(cuò)誤，如下圖
NaN.jpg
這是因?yàn)閙oment的格式是必須符合自己設(shè)定的dateFormat的格式(我的設(shè)置的是2017-12-24這種類型的)素挽，由于初始值undefined不符合這種類型，所以此時(shí)我們需要對value做一下判斷了
正確修改代碼如下：
<RangePicker
onChange={this.onPickerChange}
value={this.state.startTime===undefined||this.state.endTime===undefined?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
//在這里對初始值做了判斷狸驳，如果是undefined的時(shí)候预明，value值是空，否則是自己選中的值
format={dateFormat}
placeholder={['開始時(shí)間','結(jié)束時(shí)間']}
/>
完整代碼如下：
const { RangePicker, } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm'||undefined;
export default class TableHeader extends React.Component{
constructor(props){
super(props);
this.state={
startTime:undefined,//開始時(shí)間
endTime:undefined, //結(jié)束時(shí)間
}
}
//切換tab的時(shí)候的回調(diào)函數(shù)
tabChange=(activeKey)=>{
this.setState({
startTime:undefined,//開始時(shí)間
endTime:undefined, //結(jié)束時(shí)間
})
}
//時(shí)間改變的方法
onPickerChange=(date, dateString)=>{
console.log("data",date,"dateString",dateString);
//這兩個(gè)參數(shù)值antd自帶的參數(shù)
console.log("dateString",dateString[0],"dateString",dateString[1]);
this.setState({
startTime:dateString[0],
endTime:dateString[1],
})
}
render(){
return(
<div>
//........
<RangePicker
onChange={this.onPickerChange}
value={this.state.startTime===undefined||this.state.endTime===undefined||this.state.startTime===""||this.state.endTime===""?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
format={dateFormat}
placeholder={['開始時(shí)間','結(jié)束時(shí)間']}
/>
</div>
)
}
}
這塊的value值要說一下：value= {this.state.startTime===undefined||this.state.endTime===undefined||this.state.startTime===""||this.state.endTime===""?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
可能有人會有疑問耙箍，為什么還會有this.state.startTime===""||this.state.endTime===""的情況撰糠，這是因?yàn)榻M件選中后點(diǎn)擊清空按鈕的時(shí)候會自動賦值為空，一賦值為空的時(shí)候就會不符合自定義的日期格式辩昆，就會出現(xiàn)NaN
PS:本人只是一枚廢柴小碼農(nóng)阅酪，在實(shí)戰(zhàn)中積累經(jīng)驗(yàn)，只是將所踩過的坑分享出來給遇到同樣坑的小伙伴們提個(gè)醒汁针，可能會少走些彎路术辐。如果能幫助到你解決實(shí)際問題，我將更加堅(jiān)定分享的初衷：一起成長扇丛。
目前只在知乎上和簡書上更新文章术吗，準(zhǔn)備在這兩個(gè)地方持續(xù)更新文章，您的關(guān)注對我可能是莫大的鼓勵(lì)帆精。
知乎用戶名：廢柴碼農(nóng)
微博用戶名：有溫度的壁紙
哈哈较屿，交個(gè)朋友啦~
