elementUI-日期选择器(两个框 限制选择范围、快捷键选择)
两个日期框选择
一、快捷键选择
.el-input {
width: 30%;
margin-right: 20px;
}
<div id="page">
</div>
new Vue({
el:'#page',
data: function() {
return {
value1: '',
value2: '',
}
},
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/807d585e7dbd8304602d9594fece9673.png)
<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]);
}