首页 > 其他分享 >antd-vue 时间选择器限制, 选择不超过七天的范围,且默认时间为当前时间往后七天

antd-vue 时间选择器限制, 选择不超过七天的范围,且默认时间为当前时间往后七天

时间:2024-05-17 10:31:46浏览次数:17  
标签:七天 const val value conversationTime 时间 date return 选择器

1.template 代码

<a-range-picker
			v-model:value="conversationTime"
			style="margin-right: 20px"
			:disabledDate="disabledDate"
			@calendarChange="onCalendarChange"
			@change="onChange"
			@openChange="onOpenChange"
		  />

2.js 代码

 const disabledDate = (current) => {
	if (!conversationTime.value || (conversationTime.value as any).length === 0) {
	  return false;
	}
	const tooLate =
	  conversationTime.value[0] && current.diff(conversationTime.value[0], 'days') > 7;
	const tooEarly =
	  conversationTime.value[1] && conversationTime.value[1].diff(current, 'days') > 7;
	return tooEarly || tooLate;
  };
  const onChange = (val) => {
	conversationTime.value = val;
  };
  const onCalendarChange = (val) => {
	conversationTime.value = val;
  };
  const onOpenChange = (open: boolean) => {
	if (open) {
	  conversationTime.value = [] as any;
	}
  };
   const formatTime = (date) => {
	const year = date.getFullYear();
	const month = date.getMonth() + 1;
	const day = date.getDate();
	return `${year}-${month}-${day}`;
  };

  // 获取当前日期的自然周时间
  const getTime = () => {
	const today = new Date();
	const monday = new Date(today);
	const sunday = new Date(monday);
	sunday.setDate(sunday.getDate() + 7); // 计算周日的日期
	return [dayjs(formatTime(monday)), dayjs(formatTime(sunday))];
  };

  const defaultTimeFunc = () => {
	conversationTime.value = getTime();
  };

  onMounted(() => {
	defaultTimeFunc();
  });

标签:七天,const,val,value,conversationTime,时间,date,return,选择器
From: https://www.cnblogs.com/songkomei/p/18197404

相关文章

  • 数据分享|SAS与eviews用ARIMA模型对我国大豆产量时间序列预测、稳定性、白噪声检验可
    全文链接:http://tecdat.cn/?p=31480最近我们被客户要求撰写关于ARIMA的研究报告,包括一些图形和统计输出。我国以前一直以来都是世界上大豆生产的第一大国。但由于各国的日益强大,导致我国豆种植面积和产量持续缩减。因此,预测我国的大豆产量对中国未来的经济发展有着极其重要的作......
  • centos7 设置自动更新时间
    自动更新时间,我这里使用的是ntpdate.从ntpdate手册上看,手册上更建议使用ntpd,以后再学习一些它安装ntpdateyuminstallntpdate时间服务器名称地址???cn.ntp.org.cn阿里云提供的地址ntp2.aliyun.com配置crontab0-59/10****/usr/sbin/n......
  • Centos8系统启动时间优化
    目录前言初始化系统启动阶段firmware(固件)loader(加载器)kernel(内核)initrd(初始RAM磁盘)userspace(用户空间)总结前言因需要,对Centos8操作系统的启动时间进行优化。初始化系统Centos8使用了systemd作为系统和服务管理器。systemd是现代Linux发行版中普遍采用的初始化系统,它......
  • console.time / console.timeEnd 另一种写法 (V8执行时间 and 渲染页面时间)
    console.time/console.timeEnd另一种写法(V8执行时间and渲染页面时间)<script>letprevTime=Date.now()consttotal=100000letul=document.getElementById('container')for(leti=0;i<total;i++){letli=document.......
  • python计算时间
       importtimeimportdatetimedefcompare_time(startTime,endTime):#now=datetime.datetime.now()d_start=datetime.datetime.strptime(startTime,'%Y-%m-%d%H:%M:%S')d_end=datetime.datetime.strptime(endTime,'%Y-%m-%......
  • el-date-picker选择时间只能选择到分
    说明要求el-date-picker选择日期时间时,只允许选择到分,并且分的step=5,即只能选择0、5、10、15、...实现要点通过value-format="yyyy-MM-ddHH:mm"format="yyyy-MM-ddHH:mm"控制只选择到分通过:disabled-minutes="disabledMinutes"禁用某些分钟,并且通过css样式将这些......
  • ATFNet:长时间序列预测的自适应时频集成网络
    ATFNet是一个深度学习模型,它结合了时间域和频域模块来捕获时间序列数据中的依赖关系。引入了一种新的加权机制来调整周期性的权重,增强了离散傅立叶变换,并包括一个复杂关系识别的注意力机制,在长期时间序列预测中优于当前方法(每个模型都这么说)。这是4月发布在arxiv上的论文,还包含......
  • 为什么hangfire 界面上显示的下次执行时间与配置的定时执行时间不一致
    hangfire定时任务,定位每天晚上11点55分执行;core表达式也展示是11点55执行,但下一次执行时间,展示的是每天3点执行的任务。原因:AddOrUpdate中的TimeZoneInfo(时区)参数默认是世界Utc时间,UTC时区与我们中国时区相差八个小时。需要设置TimeZoneInfo参数设置为TimeZoneInfo.Local,使......
  • 基于GWO灰狼优化的CNN-LSTM-Attention的时间序列回归预测matlab仿真
    1.算法运行效果图预览优化前    优化后     2.算法运行软件版本matlab2022a  3.算法理论概述       时间序列回归预测是数据分析的重要领域,旨在根据历史数据预测未来时刻的数值。近年来,深度学习模型如卷积神经网络(ConvolutionalNeuralN......
  • thinkphp 时间戳操作
    首先通过composer安装composerrequiretopthink/think-helper=1.0.*在文件头部引入usethink\helper\Time;比如需要获得今天的零点时间戳和23点59分59秒的时间戳list($start,$end)=Time::today();echo$start;//零点时间戳echo$end;//23点59分59秒的时......