antd之RangePicker設(shè)置默認(rèn)值方式
RangePicker設(shè)置默認(rèn)值
今天在項目中有使用到日期選擇框，在antd中選擇了一個可以選擇起始時間和結(jié)束時間的日期選擇框RangePicker
有個需求是需要將當(dāng)前時間和當(dāng)前時間的前一天作為它的默認(rèn)值，期間遇到了很多bug，在一番修改和csdn后終于修改好了，特此記錄一下
首先翻看一下antd中日期選擇框的api，它有一個defaultValue的屬性，如果是RangePicker的話，他是接受一個數(shù)組作為參數(shù)，分別作為起始和結(jié)束的時間默認(rèn)值
有點(diǎn)坑的地方在與我剛開始沒看懂這里的moment[]，是啥意思，它這里需要傳入moment對象，也就是你數(shù)組里的值必須要是moment對象
所以先要引入moment
運(yùn)行：
npm install moment --save
在react中引入：
import moment from 'moment' React.Component.prototype.$moment = moment
然后就可以調(diào)用moment()將時間字符串轉(zhuǎn)換成moment對象了，moment()方法接受兩個參數(shù)，第一個是時間字符串如：'2021-01-29'，第二個參數(shù)是時間格式，需要注意的時，你前面的時間字符串和后面的時間格式需要對應(yīng)，如moment('2021-01-29','YYYY-MM-DD')或者moment('2021-01-29 18:49:20','YYYY-MM-DD HH:mm:ss')等，看你自己的項目需求了
如果你出現(xiàn)了類似這種的錯
那大概率是不符合moment格式的問題了
antd的RangePicker設(shè)置七天前，30天前，90天前
記錄一下在業(yè)務(wù)中，用antd的日期組件設(shè)置默認(rèn)選擇范圍的問題。
Antd的RangePicker設(shè)置七天前，30天前，90天前，并且設(shè)置默認(rèn)時分秒為 00:00:00 ～ 23:59:59
<RangePicker
ranges={{
最近一周: [moment().startOf('day').subtract(6, 'd'), moment().endOf('day')],
最近一個月: [moment().startOf('day').subtract(30, 'd'), moment().endOf('day')],
最近三個月: [moment().startOf('day').subtract(90, 'd'), moment().endOf('day')],
}}
showTime={{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
}}
onChange={(data, dataString) => {
getDataRange(
timeToTimestamp(dataString[0]),
timeToTimestamp(dataString[1]),
);
}}
/>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react?hooks頁面實時刷新方式(setInterval)
這篇文章主要介紹了react?hooks頁面實時刷新方式(setInterval),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react結(jié)合bootstrap實現(xiàn)評論功能
這篇文章主要為大家詳細(xì)介紹了react結(jié)合bootstrap實現(xiàn)評論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
在React中是沒有插槽的概念的, 或者說在React中是不需要插槽的, 因為React對于這種需要插槽的情況非常靈活，本文給大家分享兩種方案實現(xiàn)，分別是children實現(xiàn)插槽和props實現(xiàn)插槽，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-09-09
在React中,要實現(xiàn)一個組件表格并且固定底部,可以使用CSS的固定定位或絕對定位來實現(xiàn),下面通過示例代碼給大家分享react 組件表格固定底部的實現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了react中實現(xiàn)拖拽排序react-dnd功能,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了React基于路由的代碼分割技術(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Mobx實現(xiàn)React?應(yīng)用的狀態(tài)管理詳解
這篇文章主要為大家介紹了Mobx?實現(xiàn)?React?應(yīng)用的狀態(tài)管理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React?高德地圖進(jìn)京證路線規(guī)劃問題記錄(匯總)
這篇文章主要介紹了React高德地圖進(jìn)京證路線規(guī)劃問題小記,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
React組件創(chuàng)建與事件綁定的實現(xiàn)方法
react事件綁定時。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
詳解三種方式在React中解決綁定this的作用域問題并傳參
這篇文章主要介紹了詳解三種方式在React中解決綁定this的作用域問題并傳參，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08