element-ui日期选择组件
el-date-picker 组件的引入
<el-date-picker
class="sd"
@change="change"
v-model="abc1"
type="daterange"
range-separator="~"
:start-placeholder="this.startText"
:end-placeholder="this.endText"
:picker-options="pickerOptions1"
></el-date-picker>- @change ： 为组件绑定选择日期确定之后的事件
- v-model ： 数据绑定，日期存在这里，例如（2019-01-02~2019-03-15），但是数据绑定仅仅是作为显示作用，真正的数据可以通过change事件来获得
- type： 选择器的样式，daterange 同时出现两个月份
- :start-placeholder： 绑定第一个选择器的默认提示语言 仅仅是没有选择的时候提示，选择了之后就不在显示
- :end-placeholder： 绑定第二个选择器的默认提示语言
- :range-separator="~" : 连接符号
- :picker-options="pickerOptions1" : 限制条件
日期组件（默认当天之前可选）.png
今天之前不能选择.png
限制条件
- 实现今日之前可选
- 实现选择的快捷建（ 注意如何实现今天的前一天为截止日期）
pickerOptions1: {
disabledDate(time) {
/// 不可选天数的设置
// return time.getTime() > new Date(new Date().toLocaleDateString()).getTime(); /// 今天之后不能选择
// return time.getTime() > Date.now(); /// 今天之前不可选
return time.getTime() > new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000; /// 今天的前一天开始不能选择 （比如今天30号，只能选择到29号，30号后面的都不能选择）
},
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date() ; // 结束的日期 new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000 （一直当今天的前一天）
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 * 90);
picker.$emit('pick', [start, end]);
}
}]
},- 提示文字（start-placeholder end-placeholder） 和 选择日期显示的文字 （v-modal="timer"）是不一样的。
- 如果是要刷新之后清除当前的日期，那么 this.timer = null; 即可；亲测有效！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.04.30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录