React antdesign DatePicker组件

最新推荐文章于 2024-05-23 11:29:26 发布

慵懒的小考拉

最新推荐文章于 2024-05-23 11:29:26 发布

阅读量460

点赞数

分类专栏： react 文章标签： react ant

本文链接：https://blog.csdn.net/qq_31894961/article/details/120039458

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客探讨了在React应用中使用DatePicker组件遇到的日期取值问题，包括valuemoment显示Invaliddate和清除icon后的问题。作者提出了解决方案，即在state初始化时将日期值设为undefined，并在日期选择框中进行条件判断，确保日期格式正确。博客内容详细解释了代码实现，有助于开发者解决类似问题。

摘要由CSDN通过智能技术生成

一、日期取值

onChange={(val,dateString)=>{this.dateChange(val,dateString)}}

dateChange = (val,dateString) => {
    this.setState({
		dataDt:dateString
	})
}

二、value moment传参显示 Invalid datev 或者 value显示正常，但点击自带清除icon后显示 Invalid

解决方案: 在state初始化时给予日期值为undefined 在日期选择框中进行判断

this.state = {
    startDate : undefined
}

dateChange = (val,dateString) => {
    dateString === '' || dateString === NaN ? this.setState({
		startDate : undefined
	}) : this.setState({
		startDate : dateString
	})
}

<DatePicker
    style={{ width: '110px' }}
    placeholder="开始日期"
    value={startDate === undefined ? startDate : moment(startDate, 'YYYY-MM-DD')}
    onChange={(val,dateString)=>{this.dateChange(val,dateString)}}
/>