antd中DatePicker禁选范围如何设置

1、解决日期禁选问题
在官方api中也提到,可以设置disabledDate来实现日期的禁选

在这里插入图片描述

语法:
js中定义disabledData函数

const disabledDate = (current) => {
设置禁选范围
}
在DatePicker 标签中引入

同时我们要知道antd是默认使用moment.js来实现日期格式化的,文档中有体现 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d903b63443584600b9e859599d76bcab.png)

在官网中可以通过moment().endOf(String)方法设置该时间单位的结束
可选的时间单位有day(默认今天)、week(默认本周)、month(默认本月)以及year(默认本年)
在这里插入图片描述
这样我们就可以将该方法运用到disabledDate 函数中

const disabledDate = (current) => {
   return  current <= moment().endOf('day'); //  不过有个问题就是'今天'仍然可选(想选择今天的)
}
// 当然也可以使用moment().startOf('String') 方法
const disabledDate = (current) => {
   return  current <= moment().startOf('day'); // 如果选择时间小于等于今天则禁选。

实现结果:灰色部分为禁选
在这里插入图片描述

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值