Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.

首先先看看效果:

效果图: 默认是一直不可选择今日和以后的日期

当选择了一个日期后, 将它的可选择区间限制在 31 天内, 并且下次选择时解除限制

下面是代码示例, 里面的 props, state, this.setState 视情况自行修改

<RangePicker
style={{ marginRight: 8 }}
placeholder={[t('startDate'), t('endDate')]}
disabledDate={props.disabledDate}
onChange={dates => props.rangeOnChange(dates)}onCalendarChange={dates => props.CalendarChange(dates)}defaultValue={[props.begin,props.end]}/>disabledDate = (current) =>  {// current && (moment(current).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') //              || current > moment().endOf('day'))// 这一段是限制不可选今日和以后的日期, 看需求进行修改// this.state.TimeInterval).subtract(30, 'd') 中的 30 看需求是限制多少天内自行修改// moment(this.state.TimeInterval).add(30, 'd') 同理return this.state.TimeInterval ? parseInt(moment(moment(current).format('YYYY-MM-DD')).format('x')) < parseInt(moment(moment(this.state.TimeInterval).subtract(30, 'd').format('YYYY-MM-DD')).format('x')) || parseInt(moment(moment(current).format('YYYY-MM-DD')).format('x')) > parseInt(moment(moment(this.state.TimeInterval).add(30, 'd').format('YYYY-MM-DD')).format('x')) || current && (moment(current).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') || current > moment().endOf('day')): current && (moment(current).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') || current > moment().endOf('day'))// 后面的是解除区间限制后的规则, 设置为 flase 表示允许}async rangeOnChange(value) {// this.begin = value.length !== 0 ? value[0].unix() : '';// this.end = value.length !== 0 ? value[1].unix() : '';// 这里是将开始当天的零点时间戳和结束当天23.59.59的时间戳以秒的方式赋值. 根据后端要求传值即可this.begin = value.length !== 0 ? parseInt(moment(value[0].format("YYYY-MM-DD")).startOf('day').format('x') / 1000) : '';this.end = value.length !== 0 ? parseInt(moment(value[1].format("YYYY-MM-DD")).endOf('day').format('x') / 1000) : '';await // 日期查询相关的业务代码, 此处省略
}CalendarChange = (value) => {// 这里进行判断, 当日期的区间选择完成之后解除区间限制this.setState({ TimeInterval: value.length > 1 ? null :value[0] })}

Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.相关推荐

element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期
element的日期范围选择器快捷选择今日,昨日,本周,上周,本月,上个月,禁止选择当前日期之后的日期 <template><div class="card-data&qu ...
antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current &&am ...
element日期选择器年月日选择
element日期选择器年月日选择 1,效果图 2,月和日官网上都有现成的,直接拿来用,年手动写的 <div class="tableoptbox"><div ...
vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期
vue+elementUI日期选择器实现选择日期,自动对应周几之前在公司的项目里面遇到这个问题,如今想起来在这里总结一下,如果有更好的方法,请各位大神多多指教. 在template里面给选择日期的e ...
element 日期选择器只能选择今天之前或选择今天之后的日期
<template><div class="app-container"><el-date-pickerv-model="birthday& ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
vue2 + elementui 日期时间选择器禁止选择当前时间之前的日期及时间，并添加相应校验规则
项目里有这样一个需求:文章设置的预发布时间不得早于当前时间(包括日期和时分秒时间). 具体实现如下: 1.在日期时间选择其中设置禁止选中(包括日期和时间) (1)在html(template)中, 通 ...
mui日期选择器html,MUI-时间提示框，日期和时间提示设置
1.下图为日期选择 2.下图为时间 3.源码消息日期提示框时间 mui.init(); var btns = document.getElementsByClassName("mui- ...
html只选择年份,ant design vue 日期选择器只选择年份
mode="year" placeholder="请选择年份" format='YYYY' v-model="form.yearQuarter&quo ...

Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.

Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.相关推荐

最新文章

热门文章