修改 antdPro 时间组件默认样式，时分秒定位到固定时间

这是一个很曲折的故事，当时着急没有仔细看文档，没有找到官方的那个例子比较简单，结果自己做了类似的。

需求

有个需求 点击时间时，将时分秒固定到当天零点或者当天最后一秒

方法一

安装 momentjs

https://momentjs.com/

使用

项目中引入

import moment from 'moment'

我用的是ProFormDateTimePicker组件

将默认时间设定到当天零点

<ProFormDateTimePicker
  transform={(value: string) => {
    return {
      startTime: Number(new Date(value.replace('-', '/'))),
    }
  }}
  width="md"
  name="starTime"
  label="开始时间"
  fieldProps={{
    defaultValue: moment(new Date(new Date(new Date().toLocaleDateString()).getTime())),
  }}
/>

使用 transform 处理时间startTime: Number(new Date(value.replace('-', '/')))，将时间转成时间戳
​

fieldProps和defaultValue在 antdPro 官方文档和源码中找得到
​

然后使用moment方法，将默认时间设定到当天零点

fieldProps={{
    defaultValue: moment(
        new Date(new Date(new Date().toLocaleDateString()).getTime()),
    ),
}}

将默认时间设定到当天最后一秒

<ProFormDateTimePicker
  transform={(value: string) => {
    return {
      endTime: Number(new Date(value.replace('-', '/'))),
    }
  }}
  width="md"
  name="endTime"
  label="结束时间"
  fieldProps={{
    defaultValue: moment(
      new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
    ),
  }}
/>

同理将使用moment方法，将默认时间设定到当天最后一秒

fieldProps={{
    defaultValue: moment(
        new Date(
            new Date(new Date().toLocaleDateString()).getTime() +
                24 * 60 * 60 * 1000 -
                1,
        ),
    ),
}}

最后就达到了需求

方法二

当然是官方的做法，确实比较简单，语法可能不一样 API 中https://ant.design/components/date-picker-cn/#RangePicker
showTime.defaultValue参数

<RangePicker
  disabledDate={disabledDate}
  disabledTime={disabledRangeTime}
  showTime={{
    hideDisabledOptions: true,
    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
  }}
  format="YYYY-MM-DD HH:mm:ss"
/>

具体用法还是看官方文档。