【elementUI-日期选择器（两个框限制选择范围、快捷键选择】

最新推荐文章于 2024-05-24 16:06:09 发布

皖熊

最新推荐文章于 2024-05-24 16:06:09 发布

阅读量3.5k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/JUN416326495/article/details/126723033

版权

elementUI-日期选择器（两个框限制选择范围、快捷键选择）

两个日期框选择

两个日期框选择

一、快捷键选择

.el-input {
   
  width: 30%;
  margin-right: 20px;
}

<div id="page">
	<!--下面的html定义标签部分写在这里-->
</div>

new Vue({
   
	el:'#page',//选择元素，通常都是id
	data: function() {
   
		return {
    //定义的变量
			value1: '',
			value2: '',
			//注意：-----下面的javascript部分的代码放在这里
		}
	},
})

在这里插入图片描述

<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
  end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>

pickerOptions: {
   
  disabledDate(time) {
   
    return time.getTime() > Date.now();
  },
  shortcuts: [{
   
    text: '最近一周',
    onClick(picker) {
   
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      picker.$emit('pick', [start, end]);