antd 的MonthPicker、DatePicker任意时间开始，选择连续时间最长跨度为1年，disabledDate 不可选择的日期

已于 2023-10-25 18:14:57 修改
阅读量875 收藏
点赞数
文章标签： 前端 javascript tdesign anti-design-vue
于 2023-10-19 14:12:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47602884/article/details/133924915
版权

问题描述：

日期组件，选择任意时间月份开始，但必须选择一年时间以内的连续月份！！！

实现效果

在这里插入图片描述

解决方案

在这里插入代码片
<div style="display: flex">
     <a-month-picker
        v-model="form.startValue"
        placeholder="Start"
        @openChange="handleStartOpenChange"
      />
      <a-month-picker
        v-model="form.endValue"
        :disabled-date="disabledEndDate"
        placeholder="End"
        :open="endOpen"
        @openChange="handleEndOpenChange"
      />
</div>
import dayjs from "dayjs";
export default {              
	data() {
	    return {
	      endOpen: false,
	      form: {
	        startValue: null,
	        endValue: null,
	      },
	  }
	}，
	watch: {
    'form.startValue'(val) {
    // 监听，处理点击遮罩层关闭弹框时，结束时间限制不对
      let { startValue,endValue } = this.form
      let startY = dayjs(startValue).year()
      let startM = dayjs(startValue).month()
      let endY = dayjs(endValue).year()
      let endM = dayjs(endValue).month()
      if((startY == endY && endM >= startM) || (endY - startY == 1 && endM < startM)){
      }else{
        this.form.endValue=val
      }
    },
  },
	 methods: {
	   	// disabledStartDate(startValue) {
	    //   let { endValue } = this.form
	    //   if (!startValue || !endValue) {
	    //     return false;
	    //   }
	    //   return startValue.valueOf() > endValue.valueOf();
	    // },

	    disabledEndDate(endValue) {
	      let { startValue } = this.form
	      if (!endValue || !startValue) {
	        return false;
	      }
		
		 // 方法一、分别获取年月来比较一下
	      let startY = dayjs(startValue).year()
	      let startM = dayjs(startValue).month()
	      let endY = dayjs(endValue).year()
	      let endM = dayjs(endValue).month()
	
	      let flag = true
	      if ((startY == endY && endM >= startM) || (endY - startY == 1 && endM < startM)) {
	        flag = false
	      } else {
	        flag = true
	      }
	      return flag
	
		  // 方法二、开始时间加1年，不超过1年 并且不小于开始时间
		  // 后面还写道一个时间选择范围精确到时分秒，经测试这个方案更准确
	      // var dateTime = new Date(startValue);
	      // dateTime = dateTime.setYear(dateTime.getFullYear() + 1);
	      // dateTime = new Date(dateTime);
	      // return startValue.valueOf() >= endValue.valueOf()
	      //   || endValue.valueOf() >= dateTime.valueOf()
	    },
	
	
	    handleStartOpenChange(open) {
	      if (!open) {
	        this.endOpen = true;
	      }
	    },
	    handleEndOpenChange(open) {
	      this.endOpen = open;
	    },
	},
}

补充一个精确到时分秒的案例（最长连续选择12个月），在相同年月日情况下，保证结束时间时分秒大于起始时间
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

	<div style="display: flex; margin: 6px 0 0 0">
        <a-date-picker
          style="width: 250px"
          show-time
          v-model="form.startValue"
          placeholder="Start"
          @openChange="handleStartOpenChange"
          :allowClear="false"
          :disabled-date="disabledStartDate"
        />
        <a-date-picker
          style="width: 250px"
          show-time
          v-model="form.endValue"
          :disabled-date="disabledEndDate"
          placeholder="End"
          :open="endOpen"
          @openChange="handleEndOpenChange"
          :allowClear="false"
        />
      </div>
	import dayjs from "dayjs";
	export default {              
		data() {
		    return {
		      endOpen: false,
		      // 设置默认时间 30天前-现在
		      form: {
		        startValue: dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss'),
        		endValue: dayjs().format('YYYY-MM-DD HH:mm:ss'),
		      },
		  }
		}，
		watch: {
	 	  // 监听，处理点击遮罩层关闭弹框时，结束时间限制不对
	 	  // 直接比较时间大小
	     'form.startValue'(val) {
	      // 方法1
	      // let { startValue, endValue } = this.form
	      // var formatDate1 = new Date(startValue)
	      // var formatDate2 = new Date(endValue) 
	      // if (formatDate1 >= formatDate2) {
	      //  this.form.endValue = val
	      // }
	      // 方法2
	       if(dayjs(startValue).isAfter(dayjs(endValue))){
	        this.form.endValue = val
	      }
	    },
	  },
		 methods: {
		   	 disabledStartDate(startValue) {
		     },
	
		    disabledEndDate(endValue) {
		      let { startValue } = this.form
		      if (!endValue || !startValue) {
		        return false;
		      }
		      var dateTime = new Date(startValue);
		      dateTime = dateTime.setYear(dateTime.getFullYear() + 1);
		      dateTime = new Date(dateTime);
		      return startValue.valueOf() >= endValue.valueOf()
		        || endValue.valueOf() >= dateTime.valueOf()
		    },
		
		
		    handleStartOpenChange(open) {
		      if (!open) {
		        this.endOpen = true;
		      }
		    },
		    handleEndOpenChange(open) {
		      this.endOpen = open;
		    },
		},
	}

一些百度就知道的知识 dayjs moment 随机示例，用法我猜差不多，就当了解一下

关于时间的方法，之前一直没怎么去了解过，原来很多好用的api
moment解读常用操作及语句——subtract、add、calendar
将来就是加add，曾经就是减subtract, 现在是moment()，calendar日历格式。
链式操作举例：moment().add(7, ‘days’).subtract(1, ‘months’) // 意思为当前日期加上7天再减去一个月，时分秒和当前保持一致

Is Before
这表示 Day.js 对象是否在另一个提供的日期时间之前。
dayjs().isBefore(dayjs(‘2011-01-01’)) // 默认毫秒

Is Same
这表示 Day.js 对象是否和另一个提供的日期时间相同。
dayjs().isSame(dayjs(‘2011-01-01’)) // 默认毫秒

Is After
这表示 Day.js 对象是否在另一个提供的日期时间之后。
dayjs().isAfter(dayjs(‘2011-01-01’)) // 默认毫秒

Is Same or Before
这表示 Day.js 对象是否和另一个提供的日期时间相同或在其之前。
这依赖 IsSameOrBefore 插件，才能正常运行
dayjs.extend(isSameOrBefore)
dayjs().isSameOrBefore(dayjs(‘2011-01-01’)) // 默认毫秒

Is Same or After
这表示 Day.js 对象是否和另一个提供的日期时间相同或在其之后。
这依赖 IsSameOrAfter 插件，才能正常运行
dayjs.extend(isSameOrAfter)
dayjs().isSameOrAfter(dayjs(‘2011-01-01’)) // 默认毫秒

Is Between
这表示 Day.js 对象是否在其他两个的日期时间之间。
这依赖 IsBetween 插件，才能正常运行
dayjs.extend(isBetween)
dayjs(‘2010-10-20’).isBetween(‘2010-10-19’, dayjs(‘2010-10-25’))

以上api，如果想使用除了毫秒以外的单位进行比较，则将单位作为第二个参数传入
dayjs().isSameOrBefore(‘2011-01-01’, ‘year’)

Is a Dayjs
这表示一个变量是否为 Day.js 对象。
dayjs.isDayjs(dayjs()) // true
dayjs.isDayjs(new Date()) // false

Is Leap Year
查询 Day.js 对象的年份是否是闰年。
这依赖 IsLeapYear 插件，才能正常运行
dayjs.extend(isLeapYear)
dayjs(‘2000-01-01’).isLeapYear() // true

写道这儿，发现多看看文档比瞎百度强，突然发现了更简单的方法，白瞎了时间！

// 比如上面这个代码
let { startValue,endValue } = this.form
      let startY = dayjs(startValue).year()
      let startM = dayjs(startValue).month()
      let endY = dayjs(endValue).year()
      let endM = dayjs(endValue).month()
      if((startY == endY && endM >= startM) || (endY - startY == 1 && endM < startM)){
      }else{
        this.form.endValue=val
      }
//直接修改为
 if(dayjs(startValue).isAfter(dayjs(endValue),'month')){
	 this.form.endValue = val
}
weixin_47602884
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
antd日期选择器禁止选择当天之前的时间操作
01-22
使用disabledDate属性（不可选择的日期） <a> 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().subtract(1, days); //当天之前的不可选，不包括当天 //return current && current < moment().endOf(
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 s+: ...
vue a-range-picker回显问题和回显之后值无法改变的问题
qq_35187119的博客
03-07 1956
vue a-range-picker回显问题和回显之后值无法改变的问题
ant design vue组件内的monthPicker月份选择器如何设置value值、取值与清零
热门推荐
SHALLNY
07-24 1万+
ant design vue官方组件有些描述需要自己去反复尝试，现在遇到的monthPicker的设置value初始值，取值以及清零方法如下： 初始情况下即为空状态，默认绑定到一个变量，且当前赋值为undefined <a-month-picker placeholder="起始月份" @change="onChangeMonthOpera" v...
antd DatePicker组件a-date-picker、a-week-picker、a-month-picker 限制选未来时间以及周、月转化成日期
agua001的博客
03-03 1万+
1、a-date-picker：默认当天，限制选择未来日期(后台需要日期区间参数) <a-col :xxl="5" :xl="6" :lg="12"> <a-form-item label="时间" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }" > <a-date-picker style="width: 100%" v-decorator="['timeF
React antd MonthPicker 月份转月初至月末
weixin_43915401的博客
03-30 1688
React antd MonthPicker 月份转化为YYYY-MM-DD的第一天到最后一天 憨憨的我也不知道为什么不用RangePick组件 1、引入antd 不说了 2、使用MonthPicker <MonthPicker placeholder='请选择时间' format={'YYYY/MM'} onChange={e => this.handleMo...
antd的时间选择器a-month-picker，本地和生产正常，在测试环境无效的解决
YONJIUJIU的博客
10-10 622
不过看到这里，应该可以解释出当test环境变量名改变后bug就消失的现象，其实也不一定要用.sandbox来替代.test，非.test的值均可。至于为什么会有这段代码，可能是antd团队在测试版本中想避免某些问题，咱也理不清。然后在package.json中把测试版本的打包命令后缀换成sandbox。把环境变量的文件名.env.test改为 .env.sandbox；以上为个人的误打误撞，欢迎大伙指正与补充。
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是...
基于Antd的DatePicker组件进行二次封装:支持随意输入任意格式时间
05-13
该组件是基于antd的DatePicker日期组件二次封装的组件，本次封装主要是额外支持输入任意类型的日期格式 输入类型：2022-11-11、2022.11.11、2022/11/11、2022.11-12等混合输入类型，最后框中展示的格式是有外部传入...
react+antd 时间选择器DatePicker限制时间选择范围
qq_23830005的博客
08-10 1085
【代码】react+antd 时间选择器DatePicker限制时间选择范围。
一个简约美观的月份选择器插件month-picker
11-08
这是一个jquery插件，可以实现年月份选择功能，简约美观，短小精悍，方便使用，同时也适合jquery插件开发学习。
antd——a-date-picker——日期的限制功能——js基础积累
最新发布
yehaocheng520的博客
01-04 1287
antd——a-date-picker——日期的限制功能——js基础积累
Ant Design of Vue的TimePicker时间选择框设置默认值问题（踩坑）
一个程序员的专栏
01-12 8033
项目中，后台管理系统里面有个模块用到了时间控件，需要设置起始时间，分别是营业开始时间和营业结束时间，自己搜了一个控件，看着不错就使用了。我用的是以下部分，有个默认的defaultValue，当内容再次修改的时候会显示已保存的时间设置。 <template> <a-time-picker :default-value="moment('12:08', 'HH:mm')" format="HH:mm" /> </template> <script> i
ant design vue的a-date-picker控件尾部的清除功能清除后还会出现最初始时间？不能完全清除？
weixin_45952423的博客
08-14 991
ant design vue 的a-date-picker 控件 尾部清除功能
关于时间（日期）选择器的回显问题
风语的博客
03-03 6258
我在vue项目里用到了ant design vue 的时间选择器组件a-date-picker和a-time-picker组件，因为需要回显，一开始的时候碰到了问题，感觉有点费时间，就先跟后端调接口，回过头来在解决这个问题。 现在进入正题，代码附上。 <a-date-picker :value="moment(windowIndate, 'YYYY-MM-DD')" :defaultVa...
antd Vue --a-range-picker 数据回显时，修改后，视图不更新
weixin_48975689的博客
03-15 1052
原理：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。更换写法之后就可以正常的修改日期范围。
小程序-picker组件的使用、数据回显
weixin_44138723的博客
09-17 6311
picker组件的使用 通过点击picker选择器，触发bingchange绑定的事件函数。 在picker组件自定义data-i=“{{I}}”,在事件函数中通过e.target.dataset.i获取到data-i里的值。(这里的i代表数组中对象的下标值) 获取事件对象e获取到‘选择器中选中元素’的下标，即(e.detail.value) 一对一：即 对象数组[i].属性 = 选择器元素所在数组[e.detail.value].属性 打印对象事件e picker数据回显 ！！设置index
antd 的用法：（日期时间组件）
m0_70472662的博客
05-10 615
用途·：开始时间选择了2022年的某一天,则结束时间也只能是2022年的某一天用antd日历组件
Vue使用antd日历DatePicker指定日期可选范围
weixin_51972964的博客
05-26 1552
// 日期组件 <a-date-picker format="YYYY-MM-DD" :disabled-date="disabledDate" /> 组件接收的disabled-date为格式"YYYY-MM-DD"的数组 所以把指定的可选范围放入avaiableDateList，类型为数组 如：[“2021-05-26”, “2021-05-25”, “2021-05-24”] //method中设定传入的disabled-date方法 disabl
react antd DatePicker不可修改时间,默认为所选日期的23点59分59秒
05-30
要让 antd DatePicker 可以修改时间并设置为所选日期的 00 点 00 分 00 秒，可以使用 DatePicker 组件的 `showTime` 属性和 `defaultValue` 属性来实现。 示例代码： ```jsx import { DatePicker } from 'antd'; import moment from 'moment'; const { RangePicker } = DatePicker; function onChange(dates, dateStrings) { console.log('From: ', dates[0], ', to: ', dates[1]); console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]); } function disabledDate(current) { // Can not select days before today and today return current && current < moment().endOf('day'); } function disabledDateTime() { return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [], }; } function disabledRangeTime(_, type) { if (type === 'start') { return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [], }; } return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [], }; } function App() { return ( <div> <DatePicker showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }} defaultValue={moment('2021-06-01', 'YYYY-MM-DD')} disabledDate={disabledDate} disabledTime={disabledDateTime} format="YYYY-MM-DD HH:mm:ss" onChange={onChange} /> </div> ); } export default App; ``` 在 `showTime` 属性中，设置 `defaultValue` 为所选日期的 00 点 00 分 00 秒，即 `moment('00:00:00', 'HH:mm:ss')`。 在 `defaultValue` 属性中，设置默认选中日期为 `moment('2021-06-01', 'YYYY-MM-DD')`。 这样设置之后，就可以在 antd DatePicker 组件中选择日期和时间，并且默认时间为所选日期的 00 点 00 分 00 秒。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值