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

1029 ℃

功能描述: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,我们会在看到邮件的第一时间内为您处理!

Nginx配置什么原因导致php错误不提示
wordpress如何禁止系统自动更新邮件通知
jQuery中child选择器语法示例
百度竞价推广之百度关键词价格分析
织梦自定义表单如何判断只有会员登录以后才能