element date-picker range类型时间选择器限制选中前后7天的时间的方法

实现效果：

代码：

<template><el-date-pickerv-model="dialogExportOrdersLog.time"type="daterange"range-separator="至"start-placeholder="请选择开始日期"end-placeholder="请选择结束日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD":editable="false":disabled-date="disabledDate"@calendar-change="time=>dialogExportOrdersLog.firstSelectTime=time[0]"@visible-change="()=>dialogExportOrdersLog.firstSelectTime = null"/>
</template>
<script setup>const disabledDate = time => {// 时间选择器设定选择前后7天的方法const choiceDateTime = new Date(dialogExportOrdersLog.firstSelectTime).getTime()const minTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() - 6)const maxTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() + 6)const min = minTimeconst newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 7const max = newDate < maxTime ? newDate : maxTime// 如果已经选中一个日期 则 返回 该日期前后7天时间可选if (dialogExportOrdersLog.firstSelectTime) return time.getTime() < min || time.getTime() > max// 若一个日期也没选中 则 返回 当前日期以前日期可选return time.getTime() > Date.now()}
</script>

element date-picker range类型时间选择器限制选中前后7天的时间的方法相关推荐

element 时间选择器禁止选择以前或以后的时间
<el-date-picker v-model="certificatetime" value-format="yyyy-MM-dd" :picker-o ...
element日期时间选择器限制时间选择（精确到小时）
需求:选一个开始时间,要求精确到小时,小于当前时刻的小时不让选择,只能往后选7天. 如图: 需要element的DateTimePicker 日期时间选择器部分代码如下: <el-form-i ...
仿滴滴出行时间选择器
1.自定义时间选择器:完美实现时间进场.出场选择(并有记录上次时间功能),弹出动画.界面可根据需求扩展(项目源码见底部链接).下面是效果图: 2.网上很多demo但问题颇多,就自己参照滴滴样式和项目需 ...
html小时分钟秒选择器,时间选择器.html
时间选择器 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...
时间组件关于禁选时间的设置（禁选当前之前的时间、禁止选择某个范围之外的时间等）
1.前景开发项目的时候,用到了时间选择器,其中对禁止选择的时间上有好几个要求,现在项目完结,总结一下这几种禁止选择的情况 2.禁止选择的几种情况组件使用代码,disabledDate属性表示设置禁 ...
将Element UI的时间选择器（DatePicker）的Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式
将Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式在使用element UI的时间选择器时,控制台输出的是Sat Jan 01 2 ...
JavaScript 数字转汉字+element时间选择器快速选择
window.CN = {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八',9: '九',0: '零' } window.LEVEL = ...
Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
element UI 制作带快捷选项的时间选择器
如上图所示,带有快捷键的日期选择器: (1)设置快捷选项 View Code <el-date-pickerv-model="createTime"type="da ...

element date-picker range类型时间选择器限制选中前后7天的时间的方法

element date-picker range类型时间选择器限制选中前后7天的时间的方法相关推荐

最新文章

热门文章

element date-picker range类型时间选择器 限制选中前后7天的时间的方法

element date-picker range类型时间选择器 限制选中前后7天的时间的方法相关推荐

最新文章

热门文章

element date-picker range类型时间选择器限制选中前后7天的时间的方法

element date-picker range类型时间选择器限制选中前后7天的时间的方法相关推荐