Elemrnt UI DatePicker日期选择器(格式、限定日期),周选择器
- 日期选择器(格式)
<el-date-picker
type="date"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
v-model="date"
placeholder="选择日期"
></el-date-picker>
- 日期选择器(限定/禁用日期)
<el-date-picker
type="date"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
v-model="date"
placeholder="选择日期"
:picker-options="setDateRange"
></el-date-picker>
data(){
return{
setDateRange: {
disabledDate: time => {
const yearA = new Date(`2022-01-01`).getFullYear();
const monthA = new Date(`2022-01-01`).getMonth();
const yearB = time.getFullYear();
const monthB = time.getMonth();
if (`2022-01` !== `${yearB}${monthB}`) {
return true;
} else {
return false;
}
}
}
}
}
- 周选择器
<el-date-picker
ref="dateWeek"
id="getWeekData"
v-model="weekDate"
type="week"
format="yyyy 年第 WW 周"
placeholder="选择周"
:picker-options="{ firstDayOfWeek: 1 }"
size="small"
></el-date-picker>
watch: {
weekDate() {
if (this.weekDate != null) {
this.$nextTick(() => {
this.weekTitle = document.querySelector("#getWeekData").value;
});
}
}
},
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/44f406c4d48824d9c5219f7e4f9811be.png)