antd的DatePicker日期选择框实现日期的回显与改变

小辉吖～

已于 2023-02-15 09:59:34 修改

阅读量4.4k

点赞数

文章标签：前端 javascript react.js

于 2023-02-15 09:33:21 首次发布

本文链接：https://blog.csdn.net/qq_52845451/article/details/129037115

版权

核心就是让DatePicker的value属性的值变为受控
但是有一个缺点，必须要给一个默认时间(我这里用的当前时间)

代码如下

import React, { useState } from 'react'
import moment from 'moment' // 引入moment.js
import { DatePicker, Button } from 'antd'

export default function Aaa() {
// 获取当前时间的方法
  let getNowFormatDate = () => {
    //获取当前时间
    let date = new Date()
    let seperator1 = '-' //年月日之间的分隔
    let seperator2 = ':' //时分秒之间的分隔
    let month =
      date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1
    let strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    let strHours =
      date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    let strMinutes =
      date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    let strSeconds =
      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    let currentdate =
      date.getFullYear() +
      seperator1 +
      month +
      seperator1 +
      strDate +
      ' ' +
      strHours +
      seperator2 +
      strMinutes +
      seperator2 +
      strSeconds //拼接一下
    return currentdate //返回
  }
  const [time, setTime] = useState(getNowFormatDate())
  const changeTime = () => {
    setTime('2023-01-01 18:00:00')
  }
  const getTime = (_, time) => {
    setTime(time)
  }

  return (
    <div>
      <DatePicker
        value={moment(time, 'YYYY-MM-DD HH:mm:ss')}
        format="YYYY-MM-DD HH:mm:ss"
        placeholder="选择日期"
        showTime
        onChange={getTime}
      />
      <Button onClick={changeTime}>修改时间</Button>
    </div>
  )
}

效果如下