快捷導(dǎo)航

antd之RangePicker設(shè)置默認(rèn)值方式

更新時(shí)間：2022年12月02日 15:24:05 作者：TuMinQiang

這篇文章主要介紹了antd之RangePicker設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

RangePicker設(shè)置默認(rèn)值

今天在項(xiàng)目中有使用到日期選擇框，在antd中選擇了一個(gè)可以選擇起始時(shí)間和結(jié)束時(shí)間的日期選擇框RangePicker

有個(gè)需求是需要將當(dāng)前時(shí)間和當(dāng)前時(shí)間的前一天作為它的默認(rèn)值，期間遇到了很多bug，在一番修改和csdn后終于修改好了，特此記錄一下

首先翻看一下antd中日期選擇框的api，它有一個(gè)defaultValue的屬性，如果是RangePicker的話(huà)，他是接受一個(gè)數(shù)組作為參數(shù)，分別作為起始和結(jié)束的時(shí)間默認(rèn)值

有點(diǎn)坑的地方在與我剛開(kāi)始沒(méi)看懂這里的moment[]，是啥意思，它這里需要傳入moment對(duì)象，也就是你數(shù)組里的值必須要是moment對(duì)象

所以先要引入moment

運(yùn)行：

npm install moment --save

在react中引入：

import moment from 'moment'
React.Component.prototype.$moment = moment

然后就可以調(diào)用moment()將時(shí)間字符串轉(zhuǎn)換成moment對(duì)象了，moment()方法接受兩個(gè)參數(shù)，第一個(gè)是時(shí)間字符串如：'2021-01-29'，第二個(gè)參數(shù)是時(shí)間格式，需要注意的時(shí)，你前面的時(shí)間字符串和后面的時(shí)間格式需要對(duì)應(yīng)，如moment('2021-01-29','YYYY-MM-DD')或者moment('2021-01-29 18:49:20','YYYY-MM-DD HH:mm:ss')等，看你自己的項(xiàng)目需求了

如果你出現(xiàn)了類(lèi)似這種的錯(cuò)

那大概率是不符合moment格式的問(wèn)題了

antd的RangePicker設(shè)置七天前，30天前，90天前

記錄一下在業(yè)務(wù)中，用antd的日期組件設(shè)置默認(rèn)選擇范圍的問(wèn)題。

Antd的RangePicker設(shè)置七天前，30天前，90天前，并且設(shè)置默認(rèn)時(shí)分秒為 00:00:00 ～ 23:59:59

    <RangePicker
      ranges={{
        最近一周: [moment().startOf('day').subtract(6, 'd'), moment().endOf('day')],
        最近一個(gè)月: [moment().startOf('day').subtract(30, 'd'), moment().endOf('day')],
        最近三個(gè)月: [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]),
        );
      }}
    />

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: