Element 中时间选择器配置本月及上个月快捷方式

Element-UI中的时间选择器代码示例没有提供本月及上个月的快捷选择方式，以下提供所需代码，方便大家使用。

以下是要实现的效果图：

以下快捷选择方式的配置代码：

pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},shortcuts: [{text: "今天",onClick(picker) {picker.$emit("pick", new Date());},},{text: "昨天",onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit("pick", date);},},{text: "一周前",onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", date);},},{text: '本月',onClick(picker) {var now = new Date();var year = now.getFullYear();var month = now.getMonth()+1;if(month<10){month = '0'+month;}var myDate = new Date(year,month,0);// 本月第一天var startDate = new Date(year+'-'+month+'-01 00:00:00'); picker.$emit('pick', [startDate, now]);}}, {text: '上个月',onClick(picker) {var now = new Date();var year = now.getFullYear();var month = now.getMonth();if(month==0){month = 12;year = year-1;}if(month<10){month = '0'+month;}var myDate = new Date(year,month,0);// 上个月第一天var startDate = new Date(year+'-'+month+'-01 00:00:00'); // 上个月最后一天var endDate = new Date(year+'-'+month+'-'+myDate.getDate()+' 23:59:00');picker.$emit('pick', [startDate, endDate]);}}],
}

Element 中时间选择器配置本月及上个月快捷方式相关推荐

使用element中时间选择器和日期选择器报错Avoid mutating a prop directly since the value will be overwritte
这段时间使用element中的时间选择和日期选择报错,百度了很久找不到解决方法,但是不影响使用. 今天尝试解决了下,发现是element的版本问题,我用的2.15.9版本报错,试了下2.15.6版本不 ...
修改element-ui中时间选择器的样式
一般项目中如果设置了scoped属性,可以通过>>>或者/deep/来修改其他第三方组件的样式. 但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面 ...
vue element ui 时间选择器设置两个时间一前一后
时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器在标签设置:picker-options 属性,该属性下disabledDate(),控制 ...
element日期时间选择器限制时间选择（精确到小时）
需求:选一个开始时间,要求精确到小时,小于当前时刻的小时不让选择,只能往后选7天. 如图: 需要element的DateTimePicker 日期时间选择器部分代码如下: <el-form-i ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
iview中时间选择器可设置选择范围方法（一个月一周等）
代码如下: iview官网 <DatePickertype="datetimerange":clearable="false":options=" ...
antdv中时间选择器a-range-picker中英文混杂
修改之前环境:vben 修改: 在引入day.js之后添加一行 import 'dayjs/locale/zh-cn'; 修改之后:
时间选择器timePicker实现根据当前选择日期(当天/非当天)禁用时间段
文章目录需求描述解决日期选择器datePicker实现只能选择当天及之后的日期时间选择器timePicker实现根据datePicker选择的日期动态变化开始时间小结需求描述最近在做 ...
两种时间选择器的三种使用场景(带效果图)
前言,顺便看一下效果图在Android 开发中时间选择器的使用场景还是很多的,我这边也是常用的有两种方法,根据不同是使用需求和场景来使用,大家如果在开发中有这种需求的可以看一下本篇一.DatePi ...

Element 中时间选择器配置本月及上个月快捷方式

Element 中时间选择器配置本月及上个月快捷方式相关推荐

最新文章

热门文章

Element 中时间选择器配置 本月 及 上个月 快捷方式

Element 中时间选择器配置 本月 及 上个月 快捷方式相关推荐

最新文章

热门文章

Element 中时间选择器配置本月及上个月快捷方式

Element 中时间选择器配置本月及上个月快捷方式相关推荐