日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

antd之RangePicker設置默認值方式_React

作者：TuMinQiang ? 更新時間： 2022-12-30 編程語言

RangePicker設置默認值

今天在項目中有使用到日期選擇框，在antd中選擇了一個可以選擇起始時間和結束時間的日期選擇框RangePicker

有個需求是需要將當前時間和當前時間的前一天作為它的默認值，期間遇到了很多bug，在一番修改和csdn后終于修改好了，特此記錄一下

首先翻看一下antd中日期選擇框的api，它有一個defaultValue的屬性，如果是RangePicker的話，他是接受一個數組作為參數，分別作為起始和結束的時間默認值

有點坑的地方在與我剛開始沒看懂這里的moment[]，是啥意思，它這里需要傳入moment對象，也就是你數組里的值必須要是moment對象

所以先要引入moment

運行：

npm install moment --save

在react中引入：

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

?然后就可以調用moment()將時間字符串轉換成moment對象了，moment()方法接受兩個參數，第一個是時間字符串如：'2021-01-29'，第二個參數是時間格式，需要注意的時，你前面的時間字符串和后面的時間格式需要對應，如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設置七天前，30天前，90天前

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

Antd的RangePicker設置七天前，30天前，90天前，并且設置默認時分秒為 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]),
        );
      }}
    />

原文鏈接：https://blog.csdn.net/qq_42132814/article/details/113404126

欄目分類
最近更新