Vue - ElementUI el-date-picker 周日期选择器(type=week),获取开始和结束的年月日、当前选择日期的周数等,支持将选择范围修改为 “礼拜一到礼拜日“(提供示例源码)
在Element UI的el-date-picker
组件中,当type
属性设置为week
时,可以用来选择一个周。你可以通过监听change
事件来获取选中周的开始日期(星期一)和结束日期(星期日)的年月。
以下是一个简单的例子,展示如何获取周选择器选中周的开始和结束年月:
<template>
<el-date-picker
v-model="value"
type="week"
format="yyyy"
value-format="yyyy-MM-dd"
@change="handleWeekChange"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
value: ''
};
},
methods: {
handleWeekChange(value) {
if (value) {
// 将选中的日期字符串转换为Date对象
const date = new Date(value);
// 获取开始和结束的年月
const startYearMonth = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}`;
const endYearMonth = `${date.getFullYear()}-${('0' + ((date.getMonth() + 1) || 12)).slice(-2)}`;
console.log(`开始年月: ${startYearMonth}`);
console.log(`结束年月: ${endYearMonth}`);
}
}
}
};
</script>
在这个例子中,当用户更改周选择器的值时,handleWeekChange
方法会被触发。该方法将获取到的日期字符串转换为Date
对象,然后计算出开始和结束的年月,并在控制台输出。format
和value-format
属性用来指定输入框的显示格式和绑定值的格式,这里都设置为yyyy-MM-dd
,以便我们可以处理日期。
评论已关闭