vue-element日期选择器(默认显示当前年月日,并且只能选择当前及当前之前的日期)
vue-element日期选择器(默认显示当前年月日,并且只能选择当前及当前之前的日期)使用了element-ui组件,并根据需求进行修改
·
页面执行效果如下:
//年|月|日可分别选择并默认显示当前年月日
//只能选择当前年之前的年月日
<el-date-picker
v-model="value1"
type="year"
format="yyyy年"
:picker-options="pickerOptions0"
placeholder="选择年"
class="year"
>
</el-date-picker>
<el-date-picker
v-model="value2"
type="month"
format="MM月"
:picker-options="pickerOptions0"
placeholder="月"
class="mon"
>
</el-date-picker>
<el-date-picker
v-model="value3"
type="date"
format="dd日"
:picker-options="pickerOptions0"
placeholder="日"
class="day"
>
在data方法中引入
export default {
data() {
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6;//如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;
}
},
value1: "",
value2: "",
value3: "",
};
},
在methods中赋值
getdatetime() {
this.value1 = new Date();
this.value2 = new Date();
this.value3 = new Date();
},
最后在mounted周期内添加
mounted(){
let that = this;
that.getdatetime();
}
更多推荐
已为社区贡献1条内容
所有评论(0)