element ui 日期选择器 默认展示最近一个月的时间不能选择未来时间
最近用到element ui的日期选择器,把实现过程记录一下。(vue项目)首先说下我的需求:1、默认展示最近一个月的时间2、不可以选择未来时间 效果如下<template><div class="block"><el-date-picker
·
最近用到element ui的日期选择器,把实现过程记录一下。(vue项目)
首先说下我的需求:
1、默认展示最近一个月的时间
2、不可以选择未来时间 效果如下
<template>
<div class="block">
<el-date-picker
v-model="columnDateValue"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="~"
:default-value="Date.now() - 30 * 24 * 3600 * 1000"
:picker-options="pickerOptions"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeDate"
>
</el-date-picker>
</div>
</template>
以上做个解释
format="yyyy-MM-dd"和 value-format=“yyyy-MM-dd” 要写上 要规定好日期格式
:picker-options=“pickerOptions” 是为了不让选择今天之后的日期 对应的函数在data里
:default-value="Date.now() - 30 * 24 * 3600 * 1000"是为了让它默认不展示下一个月的日历
下图左图是没有加 :default-value之前的(当天是1月10号,展示1月和2月的日历) 右图是加了之后的
export default {
data() {
return {
columnDateValue: [], // 因为我默认展示的是时间区间 所以定义一个数组
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
},
methods: {
//changeDate 函数 是我绑定的change事件 用来执行获取数据api的函数的
changeDate() {
this.getApiBar('yvjing', 1)
},
//格式化时间 返回年月日
getDate(time) {
if (time) {
let val = new Date(time);
let Y = val.getFullYear();
let M = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1);
let D = val.getDate() < 10 ? '0' + val.getDate() : val.getDate();
let h = val.getHours() < 10 ? '0' + val.getHours() : val.getHours();
let m = val.getMinutes() < 10 ? '0' + val.getMinutes() : val.getMinutes();
return Y + '-' + M + '-' + D;
}
return ''
}
},
mounted() {
let nowTimes = Date.now();
let oldTimes = nowTimes - (86400000 * 30);
let oldDate = this.getDate(oldTimes); //一个月前的时间
let nowDate = this.getDate(nowTimes);//今天的时间
this.columnDateValue = [oldDate, nowDate];
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)