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-time-picker设置默认赋值时间

Vue项目如何实现文件上传（附完整代码）

Vue开发中最常用的几种UI组件库

vue语法如何设置el-select默认值

el-tree组件如何添加虚线指示

标签： el-date-picker, element-ui, 时间, 时间控件, 时间组件

上面是“el-date-picker区间时间可输入(外面输入框禁止输入，弹窗框可输入)”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2321.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！