当前位置: 首页 > news >正文

datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)

elementUI的组件文档中没有详细说明type="dates"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择:

<div class="block"><span class="demonstration">多个日期</span><el-date-pickertype="dates"v-model="value4":picker-options="pickerOption"placeholder="选择一个或多个日期"></el-date-picker></div>
</div>

通过设置变量pickerOption的值可设置快捷选择:

pickerOption:{shortcuts:[text:'这半个月',onClick(picker){let end = new Date();let start = dateFormat(new Date(),'-');end.setTime(end.getTime() + 3600 * 1000 * 24 * 14);end = dateFormat(end,'-');let allDate = getAllDate(start,end);picker.$emit('pick', [...allDate]);}]
}

其中dateFormat方法是将日期格式化,getAllDate方法是获取开始和结束日期之间的全部日期,在data中定义:

let dateFormat = (time,h='')=>{let ymd = '';let month = (time.getMonth() + 1 )>=10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() +1));let day = time.getDate() >= 10? time.getDate() : ('0' + time.getDate());ymd += time.getFullYear() +h;ymd += month + h;ymd += day;return ymd;
}
let getAllDate=(start,end)=>{let allDateArr=[];let startArr = start.split('-');let endArr = end.split('-');let db = new Date();let db.setUTCFullYear(startArr[0[,startArr[1]-1,startArr[2]);let de = new Date();de.setUTCFullYear(endArr[0[,endArr[1]-1,endArr[2]);let unixDb = db.getTime();let unixDe = de.getTime();let stamp;const oneDay = 24*60*60*1000;for(stamp = inixDb;stamp<=unixDe;){allDateArr.push(dateFormat(new Date(parseInt(stamp)),'-'));stamp = stamp+oneDay;}return allDateArr;
}
http://www.lryc.cn/news/115233.html

相关文章:

  • 【语音合成】微软 edge-tts
  • elevation mapping学习笔记3之使用D435i相机离线或在线订阅点云和tf关系生成高程图
  • ESP32 Max30102 (3)修复心率误差
  • 16-4_Qt 5.9 C++开发指南_Qt 应用程序的发布
  • oracle容灾备份怎么样Oracle容灾备份
  • AcWing 4957:飞机降落
  • 强化学习研究 PG
  • uniapp微信小程序 401时重复弹出登录弹框问题
  • Cloud Studio实战——热门视频Top100爬虫应用开发
  • php 去除二维数组重复
  • 玩转graphQL
  • 神经网络super(XXX, self).__init__()的含义
  • 45.杜芬方程解仿真解曲线(matlab程序)
  • 服务器数据恢复-EXT3分区误删除邮件的数据恢复案例
  • C 语言的逗号运算符
  • 无人车沿着指定线路自动驾驶与远程控制的实践应用
  • C++ 多态性——纯虚函数与抽象类
  • 小程序如何使用防抖和节流?
  • 计算机三级网络技术(持续更新)
  • Django Rest_Framework(二)
  • Kotlin~Visitor访问者模式
  • LVS-DR模式集群构建过程演示
  • UML-A 卷-知识考卷
  • BpBinder与PPBinder调用过程——Android开发Binder IPC通信技术
  • 篇十五:模板方法模式:固定算法的步骤
  • web-ssrf
  • 【HarmonyOS】【续集】实现从视频提取音频并保存到pcm文件功能(API6 Java)
  • MySQL为什么要使用 B+Tree 作为索引结构?
  • Three.js阴影
  • VSCode Remote-SSH (Windows)