Vue2中Element DatePicker组件设置默认日期及控制日期范围
前言
以前都是做练习, 上周拿到这个任务直接被卡住…
一、设置默认日期
1.不要用placeholder
依然不使用placeholder属性, 在v-model初始就绑定了时间的情况下, 组件可以识别并自动切换到对应日期, 使用placeholder其实是无效的.
placeholder展示的值并不是绑定在data中的属性上的, 即便设置, 初始状况下也无法获取值.
<el-date-picker v-model="date" format="yyyy-MM-dd" > <!-- :placeholder="date" --> </el-date-picker>
data() {
return {
date: '2017-01-01'
};
},
这样也是照常显示日期, 另外提醒就是format不要全大写, 会没法切换日期.
另外:
format: datePicker以何种格式展示时间value-foramt: detePicker的值为何种格式(从data中直接取到的值为何种格式)
<template>
<div>
<el-date-picker v-model="date" format="yyyy-MM-dd" value-format="yyyyMMdd">
</el-date-picker>
{{ date }}
</div>
</template>
data() {
return {
date: "20020807",
};
},
合理使用免除一些不必要的数据处理.
2.设置动态的默认日期
还是利用v-model, 可以利用时间对象new Date()的辅助.
<el-date-picker v-model="date.createDate" format="yyyy-MM-dd" ></el-date-picker>
data() {
return {
date: {
createDate: new Date(),
},
};
},
不过你可能并不想每次拿数据都到date.createDate里去拿, 所以数组也是可以的
data() {
return {
date: [ new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() ]
};
},
如果数组取值形式也不能满意, 那就把表达式抽离出来, 然后你可以在mounted或者created周期把它赋值给data里绑定的那个属性, 就像这样:
data() {
return {
date: "",
};
},
created() {
this.initDate();
},
methods: {
getDate() {
return (
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate()
);
},
initDate() {
this.date = this.getDate()
},
},
};
二、限制日期选取
dateRange模式下也是一样的.
1.方案
不是用disabled属性来做这个, 刚开始用的时候迷糊了…
使用pickerOptions属性来达到这个目的, pickerOptions绑定的函数对象里有diabledDate函数类型, 这个函数可以接受一个参数在运算中作为当前日期(这个参数一般会写作time), 而函数内的表达式返回true时, datePicker会根据表达式来对日期进行限制选择(就是有些日期会变成灰色不可选).
| 属性 | 说明 |
|---|---|
| shortcuts | 设置快捷选项(就是日期选择表左边的快捷选项)，需要传入 { text, onClick } 对象 |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean |
| firstDayOfWeek | 周起始日 |
| onPick | 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 |
但是这个属性本身只需要一个对象, 不管你做什么, 你最后给它一个对象就好了, 你可以先在data里准备好这个对象, 然后在里面搞一个disabledDate属性, 但是的disabledDate属性的值一定得是个函数, 还得能返回Boolean.
2.举例
比如这样:
<el-date-picker v-model="date" format="yyyy-MM-dd" :picker-options="limitDate" ></el-date-picker>
data() {
return {
date: "",
limitDate: {
// 一个与picker-options绑定的对象, 和它内部的函数类型disabledDate属性
disabledDate: this.doLimitDate
},
};
},
methods: {
doLimitDate() { // 一个能返回Boolean的函数
this.limitDate.disabledDate = (time) => { // time为当前日期, disabledDate自带参数
return (time.getTime() + 24 * 3600 * 1000) > Date.now()
};
},
},
或者这样:
嗯…我觉得可以尝试直接返回一个内含可返回布尔值的函数的对象?
<el-date-picker v-model="date" format="yyyy-MM-dd" :picker-options="limitDate" ></el-date-picker>
data() {
return {
date: "",
};
},
computed: {
limitDate() {
return {
disabledDate:(time) => { // time为当前日期, disabledDate自带参数
return (time.getTime() + 24 * 3600 * 1000) > Date.now();
};
}
}
效果都是一样的, 在我的黑暗模式下不太明显, 调回来会清晰一些:
你可以看到未达到的日期都是灰色, 不可选的.
总结
还好吧, 我前几天一直很焦虑, 分给我的任务做的很慢, 很多组件的用法都是第一次尝试, 然后项目也不熟悉, 公共组件和方法用起来也是磕磕绊绊然后接口又出了问题, 啊——! 总之结果就是我做的很慢…
到此这篇关于Vue2中Element DatePicker组件设置默认日期及控制日期范围的文章就介绍到这了,更多相关Vue2 Element DatePicker组件设置日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue工程模板文件 webpack打包配置,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了如何在VUE中使用vue-awesome-swiper，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
本篇文章主要介绍了详解vue中点击空白处隐藏div的实现（用指令实现），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
很多Vue项目中都需要PDF文件预览功能,比如合同ERP,销售CRM,内部文档CMS管理系统,内置PDF文件在线预览功能,下面这篇文章主要给大家介绍了关于如何在vue中实现文件预览功能的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了如何在Vue项目中添加接口监听遮罩,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了Vue3中的setup执行时机与注意点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
下面小编就为大家分享一篇vue页面离开后执行函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章给大家带来了Vue.js 踩坑记之双向绑定问题，非常不错，具有参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
工作中vue表单使用的最多的莫过于input、textarea、select等，原生js的基础上vue通过双向数据绑定等，实现了自己独有的一套指令，这是react中没有的部分，也算是vue的一大特色2022-09-09
最新评论