【Ant Design】RangePicker的使用以及常见格式转换

一、RangePicker的常见使用

组件来源：日期选择框 DatePicker - Ant Design

相关引入：

import {
  DatePicker,
} from "antd"
import moment from 'moment';
const { RangePicker } = DatePicker

注意：这里默认安装了antd和moment，非本文重点，自行搜索。 

本次案例简述：

列表->列表项->编辑数据操作->日期选择框的正常显示

 存储列表项的对象数组以及截止时间字段，如下：

RangePicker组件的value格式如下：

日期选择框 DatePicker - Ant Design

value

日期

moment

 很明显，如果直接用列表项的日期字符串数组赋值给RangePicker的value，肯定会报错（类型错误：字符串和moment）。

日期选择框的一个moment格式如下：

需要做一些转换。

假设你的对象数组格式如下：

（注意：本次案例（函数式组件）为了方便，是直接在组件外设置的变量）

//模拟数据，非真实用户信息
const initFakeData = {
      operate_name: "王六五",
      login_phone: "13765432109",
      cooperation_name: "合作方C",
      time: ["2024-11-11","2024-12-11"],
      update_time: "2024-04-12 12:00:00",
      update_number: "003C",
    };

const time=initFakeData.time;
//遍历，将字符串数组中的元素（字符串）转为moment格式
initFakeData.time=time.map(dateString => moment(dateString))

知识点相关链接：

 Moment.js 中文网

JavaScript Array map() 方法 | 菜鸟教程

            <RangePicker
                  allowClear
                  value={initFakeDate.time}
                  format={"YYYY-MM-DD"}
                  onChange={(date,dateString)=>{selectDate(date,dateString)}}
                  style={{ width: "100%" }}
                />

 此时RangePicker的value就可以正常使用。

完整的简单案例：(方便演示起见，只是直接显示日期选择框组件）

import React from "react"
import {
  DatePicker,
} from "antd"
import moment from 'moment'
const { RangePicker } = DatePicker

//假数据，用于测试
const initFakeData = {
      operate_name: "王六五",
      login_phone: "13765432109",
      cooperation_name: "合作方C",
      time: ["2024-11-11","2024-12-11"],
      update_time: "2024-04-12 12:00:00",
      update_number: "003C",
    };

const time=initFakeData.time;
//遍历，将字符串数组中的元素（字符串）转为moment格式
initFakeData.time=time.map(dateString => moment(dateString))

const Index = () => {
 return (
     <RangePicker
       allowClear
       value={initFakeData.time}
       format={"YYYY-MM-DD"}
       onChange={(date,dateString)=>{selectDate(date,dateString)}}
       style={{ width: "100%" }}
       />
)
}

二、常见的日期格式转换

1、字符串转moment

如上的演示，核心语句是

moment(xx)

如：

const obj={
 id:1,
 time:'2024-12-12',
}
obj.time=moment(obj.time)

2、moment转字符串

假设对象的一个属性是monent格式，想转为字符串，核心语句如下：

.format(xx)

常用语句：

.format('YYYY-MM-DD')  // 精确到天

.format('YYYY-MM-DD HH:mm:ss')  //精确到秒

const obj={
 id:1,
 moment_time:xx,  //假设是moment类型，具体数据就不写了
}

obj.moment_time.format('YYYY-MM-DD') //生成的格式:'xxxx-xx-xx',如'2024-12-12'
obj.moment_time.format('YYYY-MM-DD HH:mm:ss') //生成的格式:'xxxx-xx-xx xx:xx:xx',如'2024-12-12 10:00:12'

3、Date类型转字符串

Date格式如下：

Thu Dec 12 2024 11:17:28 GMT+0800 (中国标准时间)

 我们想要的效果（比如精确到秒）：

2024-12-12 11:17:28  

思路：Date转moment再转为字符串

const currentTime=new Date()
//精确到天
const char_time1=moment(currentTime).format('YYYY-MM-DD') 
//精确到秒
const char_time2=moment(currentTime).format('YYYY-MM-DD HH:mm:ss') 

---

后续有空再更新文章相关细节。-12-12