uni-app 时间周选择器
uni-app 时间周选择器
2020-06-03 18:40
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
比如选择2020年第12周，返回第12周的星期一对应的日期星期天对应的日期
4 回复
应用组件
<template>
<view class="p-picker-week">
<c-picker-week></c-picker-week>
</view>
</template>
组件代码
<template>
<view class="c-picker-week">
<picker mode=“multiSelector” :range=“pickerRange” :value=“pickerValue” @change=“selectYearWeek” @columnchange=“selectYear”>
<view class="c-picker-week__text">{{ showContent ? showContent : ‘时间周选择器’}}</view>
<view class="c-picker-week__text" v-if="selectMonday">选中周周一的日期：{{ selectMonday }}</view>
<view class="c-picker-week__text" v-if="selectSunday">选中周周日的日期：{{ selectSunday }}</view>
</picker>
</view>
</template>
在uni-app中实现时间周选择器，可以利用uni-app自带的组件以及JavaScript的日期处理功能来实现。下面是一个简单的代码示例，展示了如何创建一个周选择器，用户可以选择某一年中的某一周。
首先，在页面的<template>部分，我们可以创建一个选择器组件，包含年份和周数的选择：
<template>
<view class="container">
<picker mode="selector" :range="years" v-model="selectedYear" @change="onYearChange">
<view class="picker">{{ selectedYear }}年</view>
</picker>
<picker mode="selector" :range="weeksInYear" v-model="selectedWeek" @change="onWeekChange">
<view class="picker">{{ getWeekDisplay(selectedYear, selectedWeek) }}</view>
</picker>
</view>
</template>
接下来，在<script>部分，我们需要定义年份和周数的范围，并处理用户选择的变化：
<script>
export default {
data() {
return {
years: Array.from({ length: 10 }, (_, i) => (new Date()).getFullYear() - 5 + i), // 生成近10年的年份列表
selectedYear: (new Date()).getFullYear(),
weeksInYear: this.generateWeeksInYear(this.selectedYear),
selectedWeek: 1,
};
},
methods: {
generateWeeksInYear(year) {
const firstDayOfYear = new Date(year, 0, 1);
const weekNumberOfYear = Math.ceil((((firstDayOfYear.getDay() + 1) + (365 - firstDayOfYear.getDay() % 7)) / 7));
return Array.from({ length: weekNumberOfYear }, (_, i) => i + 1);
},
getWeekDisplay(year, week) {
const firstDayOfYear = new Date(year, 0, 1);
const dayOfWeek = (firstDayOfYear.getDay() + 1) % 7; // 第一天是星期几（0-6）
const firstDayOfWeek = new Date(year, 0, 1 - dayOfWeek + (week - 1) * 7);
const lastDayOfWeek = new Date(firstDayOfWeek);
lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
return `${firstDayOfWeek.toLocaleDateString()} - ${lastDayOfWeek.toLocaleDateString()}`;
},
onYearChange(e) {
this.selectedWeek = 1; // 重置周数为1
this.weeksInYear = this.generateWeeksInYear(this.selectedYear);
},
onWeekChange(e) {} // 可以在这里处理周数变化后的逻辑
}
};
</script>
最后，在<style>部分，我们可以添加一些简单的样式：
<style scoped>
.container {
padding: 20px;
}
.picker {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
这个示例展示了如何使用uni-app的<picker>组件来选择年份和周数，并动态生成某一年中的周数列表。当用户选择年份时，周数列表会自动更新，同时显示所选周数的起始和结束日期。
