el-date-picker区间时间可输入(外面输入框禁止输入，弹窗框可输入)

功能描述：element-ui区间外面不允许输入，点击弹窗框显示一个日期输入框，输入时间日期自动切换。

1、时间插件如下：

<el-date-picker
	v-model="searchForm.dateTime"
	type="datetimerange"
	align="right"
	unlink-panels
	range-separator="至"
	:start-placeholder="startDate"
	:end-placeholder="endDate"
	:picker-options="pickerOptions"
	format="yyyy-MM-dd"
	value-format="yyyy-MM-dd"
	@change="getMyDateTime()"
	@focus="forbid"
></el-date-picker>

2、时间选择input禁止输入forbid

forbid() {
  document.activeElement.blur();
}

3、选择时间赋值

getMyDateTime() {
  this.startDate = this.searchForm.dateTime[0];
  this.endDate = this.searchForm.dateTime[1];
},

4、pickerOptions参数

//需求只需要显示近一周、近一个月、近一年
pickerOptions: {
  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]);
      }
    },
    {
      text: "近一个月",
      onClick(picker) {
      	const end = new Date();
      	const start = new Date();
      	start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      	picker.$emit("pick", [start, end]);
      }
    },
    {
      text: "近一年",
      onClick(picker) {
      	const end = new Date();
      	const start = new Date();
      	start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      	picker.$emit("pick", [start, end]);
      }
    }
  ]
},

5、时间类型选择datetimerange

//datetimerange时间类型会同时出现日期和时间，用css去掉
.el-date-range-picker__editors-wrap
  > span.el-date-range-picker__time-picker-wrap {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.el-date-range-picker__editors-wrap > span:nth-child(2) {
  display: none;
}

以上是编程学习网小编为您介绍的“el-date-picker区间时间可输入(外面输入框禁止输入，弹窗框可输入)”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。