- 核心就是让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>
)
}
效果如下
原文链接:https://blog.csdn.net/qq_52845451/article/details/129037115
此处评论已关闭