时间周选择器

搞出来了吗

插件开发 Q 1196097915

应用组件

<template>  
    <view class="p-picker-week">  
        <c-picker-week></c-picker-week>  
    </view>  
</template>  

<script>  
    import CPickerWeek from '@/components/c-picker-week/c-picker-week.vue'  
    export default {  
        components: {  
            CPickerWeek  
        },  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>

组件代码

<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>  

<script>  
    export default {  
        data() {  
            return {  
                pickerRange: [[], []],  
                pickerValue: [0, 0],  
                startWeekDate: '',  
                selectMonday: '',  
                selectSunday: '',  
                showContent: ''  
            };  
        },  

        created() {  
            let year = new Date().getFullYear(); // 当前系统年份  
            let yearList = []; // 根据当前系统年份获取的年份数组，可按需求自行调整，当前规则为系统年份前后10年  
            for (let i = -10; i < 11; i++) {  
                yearList.push(year + i);  
            }  
            this.pickerRange[0] = yearList;  
            let yearIndex = yearList.findIndex(val => val === year); // 选择器初始选中的年份位置  
            this.pickerValue[0] = yearIndex;  
            // this.getWeekCountByYear(year.toString());  
            this.selectYear({  
                detail: {  
                    column: 0,  
                    value: yearIndex  
                }  
            });  
            this.selectYearWeek({  
                detail: {  
                    value: this.pickerValue  
                }  
            });  
        },  

        methods: {  
            formatDate(date) {  
                // 格式化日期，将日期转为yyyy-mm-dd的格式  
                date = new Date(date);  
                let y = date.getFullYear();  
                let m = this.dateToString(date.getMonth() + 1);  
                let d = this.dateToString(date.getDate());  
                return y + '-' + m + '-' + d;  
            },  

            dateToString(date) {  
                // 补0，将日期转为书面格式  
                date = parseInt(date);  
                if (date < 10) {  
                    date = '0' + date;  
                }  
                return date.toString();  
            },  

            getWeekCountByYear(yearStart) {  
                /*  
                * 根据传入的年份计算这年有几周，第一周周一的日期  
                * yearStart (String) 选择的年份  
                */  
                let dateStart = new Date(yearStart); // 选择年份的第一天  
                console.log('!~~~dateStart', dateStart);  
                // console.log('!~~~dateStart-formatDate', this.formatDate(dateStart));  
                let dateEnd = new Date((parseInt(yearStart) + 1).toString()) - 24*60*60*1000; // 选择年份的最后一天  
                // console.log('!~~~dateEnd', dateEnd);  
                // console.log('!~~~dateEnd-formatDate', this.formatDate(dateEnd));  
                let dateStartWeek = dateStart.getDay() === 0 ? 7 : dateStart.getDay(); // 选择年份的第一天是星期几  
                // console.log('!~~~dateStartWeek', dateStartWeek);  
                /*  
                *根据中华人民共和国国家标准GB/T 7408-2005《数据元和交换格式信息交换日期和时间表示法》中4.3.3.2部分：即一年中的第一个日历星期包括该年的第一个星期四，并且日历年的最后  
                *一个日历星期就是在下一个日历年的第一个日历星期之前的那个星期，日历星期数是其在该年中的顺序。  
                */  
                let startWeekDate = ''; // 第一周的星期一的日期  
                if (dateStartWeek > 4) {  
                    startWeekDate = new Date(dateStart.getTime() + 24*60*60*1000*(7 - dateStartWeek + 1));  
                } else {  
                    startWeekDate = new Date(dateStart.getTime() - 24*60*60*1000*(dateStartWeek - 1));  
                }  
                // console.log('!~~~startWeekDate-formatDate', this.formatDate(startWeekDate));  
                this.startWeekDate = this.formatDate(startWeekDate);  
                let lastyearDateStart = new Date((parseInt(yearStart) + 1).toString()); // 选择年份下一年的第一天  
                // console.log('!~~~lastyearDateStart', lastyearDateStart);  
                let lastyearDateStartWeek = lastyearDateStart.getDay() === 0 ? 7 : lastyearDateStart.getDay(); // 选择年份下一年的第一天是星期几  
                // console.log('!~~~lastyearDateStartWeek', lastyearDateStartWeek);  
                let lastyearStartWeekDate = ''; // 选择年份下一年的第一周的星期一的日期  
                if (lastyearDateStartWeek > 4) {  
                    lastyearStartWeekDate = new Date(lastyearDateStart.getTime() + 24*60*60*1000*(7 - lastyearDateStartWeek + 1));  
                } else {  
                    lastyearStartWeekDate = new Date(lastyearDateStart.getTime() - 24*60*60*1000*(lastyearDateStartWeek - 1));  
                }  
                // console.log('!~~~lastyearStartWeekDate-formatDate', this.formatDate(lastyearStartWeekDate));  
                let weekCount = (lastyearStartWeekDate - startWeekDate)/(7*24*60*60*1000); // 选择的年份有多少周  
                // console.log('!~~~weekCount', weekCount);  
                console.log(yearStart + '年有' + weekCount + '周，第一周周一的日期是' + this.formatDate(startWeekDate));  
                let weekList = []; // 选择年份对应的周列表  
                for (let i = 0; i < weekCount; i++) {  
                    weekList.push('第' + (i + 1) + '周');  
                }  
                // console.log('!~~~weekList', weekList);  
                this.pickerRange[1] = weekList;  
                this.$forceUpdate(); // 重新渲染  
            },  

            selectYearWeek(e) {  
                console.log('!~~~e', e);  
                console.log('选择了' + this.pickerRange[0][e.detail.value[0]] + '年' + this.pickerRange[1][e.detail.value[1]]);  
                console.log('!~~~this.startWeekDate', this.startWeekDate);  
                this.selectMonday = this.formatDate(new Date(this.startWeekDate).getTime() + 7*24*60*60*1000*e.detail.value[1]);  
                this.selectSunday = this.formatDate(new Date(this.selectMonday).getTime() + 6*24*60*60*1000);  
                console.log('!~~~selectMonday', this.selectMonday);  
                console.log('!~~~selectSunday', this.selectSunday);  
                this.showContent = '选择了' + this.pickerRange[0][e.detail.value[0]] + '年' + this.pickerRange[1][e.detail.value[1]];  
            },  

            selectYear(e) {  
                // console.log('!~~~e', e);  
                // console.log('!~~~e.detail.value', e.detail.value);  
                if (e.detail.column === 0) {  
                    this.getWeekCountByYear(this.pickerRange[0][e.detail.value].toString());  
                }  
            }  
        }  
    }  
</script>  

<style lang="scss">  
.c-picker-week {  
    .c-picker-week__text {  
        color: #333333;  
        font-size: 32rpx;  
        line-height: 44rpx;  
        text-align: center;  
    }  
}  
</style>