uview 实现按周选择的日期选择器
2023-05-19 本文已影响0人
南土酱
本着需求最重要的理念。按周选择？找了uniapp 和 uview 的官方也没找到合适的解决方案。
最终只能自己用uview 的日历选择器去改写。
思路:
1.日历选择器本身有范围选择
2.在选中的时候默认判断周一到周日的日期
3.将日期强制选中周一到周日即可
大概效果
image.png
在官网github 上 拿到源码
入口.png
位置.png
由于没有注释，直接讲下改动的部分
下图是删除部分代码:
image.png
image.png
dateClick 函数改写
startDate endDate 是必须保留的。
新增一个 yearweek 变量，用来表明是当年的第几周
如果是求月的第几周，自己改写一下日期计算逻辑即可
dateClick: function (day) {
day += 1;
if (!this.openDisAbled(this.year, this.month, day)) {
this.day = day;
var cur = new Date(`${this.year}/${this.month}/${day}`);
var curTime = cur.getTime();
var curDay = cur.getDay();
var oneDayTime = 24 * 60 * 60 * 1000;
//显示起始周日
var SundayTime = curTime - (curDay) * oneDayTime;
//显示末尾周六
var SatTime = curTime + (6 - curDay) * oneDayTime;
//初始化日期时间
var satday = new Date(SatTime );
var sunday = new Date(SundayTime);
this.endDate = `${satday.getFullYear()}-${satday.getMonth()+1}-${satday.getDate()}`
this.startDate = `${sunday.getFullYear()}-${sunday.getMonth()+1}-${sunday.getDate()}`
// this.startDay = sunday.getDate();
// this.endDay = satday.getDate()
this.startYear = this.year;
this.startMonth = this.month;
this.endYear = this.year;
this.endMonth = this.month;
//计算当前是本年第几周
let dateFirst = new Date(this.year, 0, 1)
let dataNumber = Math.round((cur.valueOf() - dateFirst.valueOf()) / oneDayTime)
this.yearWeek = Math.ceil((dataNumber + dateFirst.getDay()) / 7)
}
最后 btnFix函数 emit 回传数据
btnFix (show) {
if (!show) {
this.close();
}
if (!this.startDate || !this.endDate) return;
this.$emit('change', {
startDate: this.startDate,
endDate: this.endDate,
yearWeek:this.yearWeek
});
}
贴一下改好的代码和调用方式需要自取
<WeekPicker v-model="showWeek" mode="date" @change="changeWeek" />
<template>
<u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius"
:closeable="closeable">
<view class="u-calendar">
<view class="u-calendar__header">
<view class="u-calendar__header__text" v-if="!$slots['tooltip']">
{{ toolTip }}
</view>
<slot v-else name="tooltip" />
</view>
<view class="u-calendar__action u-flex u-row-center">
<view class="u-calendar__action__icon">
<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor"
@click="changeYearHandler(0)"></u-icon>
</view>
<view class="u-calendar__action__icon">
<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
</view>
<view class="u-calendar__action__text">{{ showTitle }}</view>
<view class="u-calendar__action__icon">
<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
</view>
<view class="u-calendar__action__icon">
<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor"
@click="changeYearHandler(1)"></u-icon>
</view>
</view>
<view class="u-calendar__week-day">
<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{ item }}</view>
</view>
<view class="u-calendar__content">
<!-- 前置空白部分 -->
<block v-for="(item, index) in weekdayArr" :key="index">
<view class="u-calendar__content__item"></view>
</block>
<view class="u-calendar__content__item" :class="{
'u-hover-class': openDisAbled(year, month, index + 1),
'u-calendar__content--start-date': startDate == `${year}-${month}-${index + 1})`,
'u-calendar__content--end-date': endDate == `${year}-${month}-${index + 1}`
}" :style="{ backgroundColor: getColor(index, 1) }" v-for="(item, index) in daysArr" :key="index"
@tap="dateClick(index)">
<view class="u-calendar__content__item__inner" :style="{ color: getColor(index, 2) }">
<view>{{ index + 1 }}</view>
</view>
</view>
<view class="u-calendar__content__bg-month">{{ month }}</view>
</view>
<view class="u-calendar__bottom">
<view class="u-calendar__bottom__choose">
<text>{{ startDate }}</text>
<text v-if="endDate">至{{ endDate }}</text>
</view>
<view class="u-calendar__bottom__btn">
<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
name: 'u-calendar',
props: {
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否允许通过点击遮罩关闭Picker
maskCloseAble: {
type: Boolean,
default: true
},
// 通过双向绑定控制组件的弹出与收起
value: {
type: Boolean,
default: false
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
// 是否允许切换年份
changeYear: {
type: Boolean,
default: true
},
// 是否允许切换月份
changeMonth: {
type: Boolean,
default: true
},
// 可切换的最大年份
maxYear: {
type: [Number, String],
default: 2050
},
// 可切换的最小年份
minYear: {
type: [Number, String],
default: 1950
},
// 最小可选日期(不在范围内日期禁用不可选)
minDate: {
type: [Number, String],
default: '1950-01-01'
},
/**
* 最大可选日期
* 默认最大值为今天，之后的日期不可选
* 2030-12-31
* */
maxDate: {
type: [Number, String],
default: ''
},
// 弹窗顶部左右两边的圆角值
borderRadius: {
type: [String, Number],
default: 20
},
// 月份切换按钮箭头颜色
monthArrowColor: {
type: String,
default: '#606266'
},
// 年份切换按钮箭头颜色
yearArrowColor: {
type: String,
default: '#909399'
},
// 默认日期字体颜色
color: {
type: String,
default: '#303133'
},
// 选中|起始结束日期背景色
activeBgColor: {
type: String,
default: '#2979ff'
},
// 选中|起始结束日期字体颜色
activeColor: {
type: String,
default: '#ffffff'
},
// 范围内日期背景色
rangeBgColor: {
type: String,
default: 'rgba(41,121,255,0.13)'
},
// 范围内日期字体颜色
rangeColor: {
type: String,
default: '#2979ff'
},
//按钮样式类型
btnType: {
type: String,
default: 'primary'
},
// 当前选中日期带选中效果
isActiveCurrent: {
type: Boolean,
default: true
},
// 切换年月是否触发事件 mode=date时生效
isChange: {
type: Boolean,
default: false
},
// 是否显示右上角的关闭图标
closeable: {
type: Boolean,
default: true
},
// 顶部的提示文字
toolTip: {
type: String,
default: '选择日期'
},
initDateParams:{
type : Object,
default : {}
}
},
data () {
return {
mode: 'date',
// 星期几,值为1-7
weekday: 1,
weekdayArr: [],
// 当前月有多少天
days: 0,
daysArr: [],
showTitle: '',
year: 2020,
month: 0,
day: 0,
startYear: 0,
startMonth: 0,
startDay: 0,
endYear: 0,
endMonth: 0,
endDay: 0,
today: '',
startDate: '',
endDate: '',
min: null,
max: null,
weekDayZh: ['一', '二', '三', '四', '五', '六','日'],
yearWeek:1
};
},
computed: {
dataChange () {
return `${this.mode}-${this.minDate}-${this.maxDate}`;
},
uZIndex () {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
}
},
watch: {
dataChange (val) {
this.init()
}
},
created () {
this.init()
this.getYearWeek()
},
methods: {
getColor (index, type) {
let color = type == 1 ? '' : this.color;
let day = index + 1
let date = `${this.year}-${this.month}-${day}`
let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
let start = this.startDate.replace(/\-/g, '/')
let end = this.endDate.replace(/\-/g, '/')
let startTime = new Date(start).getTime()
let endTime = new Date(end).getTime()
if (this.endDate && timestamp > startTime && timestamp < endTime) {
color = type == 1 ? this.rangeBgColor : this.rangeColor;
}else if(timestamp == startTime || timestamp == endTime){
color = type == 1 ? this.activeBgColor : this.activeColor;
}
return color;
},
init () {
let now;
if(this.initDateParams && this.initDateParams.year && this.initDateParams.month && this.initDateParams.day){
now = new Date(this.initDateParams.year,this.initDateParams.month,this.initDateParams.day);
}else{
now = new Date()
}
let minDate = new Date(this.minDate);
let maxDate = new Date(this.maxDate);
if (now < minDate) now = minDate;
if (now > maxDate) now = maxDate;
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.day = now.getDate();
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
this.min = this.initDate(this.minDate);
this.max = this.initDate(this.maxDate || this.today);
this.startDate = "";
// this.startYear = 0;
// this.startMonth = 0;
this.startDay = 0;
// this.endYear = 0;
// this.endMonth = 0;
this.endDay = 0;
this.endDate = "";
this.changeData();
},
//日期处理
initDate (date) {
let fdate = date.split('-');
return {
year: Number(fdate[0] || 1920),
month: Number(fdate[1] || 1),
day: Number(fdate[2] || 1)
}
},
openDisAbled: function (year, month, day) {
let bool = true;
let date = `${year}/${month}/${day}`;
// let today = this.today.replace(/\-/g, '/');
let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
let timestamp = new Date(date).getTime();
if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
bool = false;
}
return bool;
},
//更改 UI- 从星期一开始或者星期日开始
generateArray: function (start, end) {
return Array.from(new Array(end+1).keys()).slice(start);
},
formatNum: function (num) {
return num < 10 ? '0' + num : num + '';
},
//一个月有多少天
getMonthDay (year, month) {
let days = new Date(year, month, 0).getDate();
return days;
},
getWeekday (year, month) {
let date = new Date(`${year}/${month}/01 00:00:00`);
return date.getDay();
},
checkRange (year) {
let overstep = false;
if (year < this.minYear || year > this.maxYear) {
uni.showToast({
title: "日期超出范围啦~",
icon: 'none'
})
overstep = true;
}
return overstep;
},
changeMonthHandler (isAdd) {
if (isAdd) {
let month = this.month + 1;
let year = month > 12 ? this.year + 1 : this.year;
if (!this.checkRange(year)) {
this.month = month > 12 ? 1 : month;
this.year = year;
this.changeData();
}
} else {
let month = this.month - 1;
let year = month < 1 ? this.year - 1 : this.year;
if (!this.checkRange(year)) {
this.month = month < 1 ? 12 : month;
this.year = year;
this.changeData();
}
}
},
changeYearHandler (isAdd) {
let year = isAdd ? this.year + 1 : this.year - 1;
if (!this.checkRange(year)) {
this.year = year;
this.changeData();
}
},
changeData () {
this.days = this.getMonthDay(this.year, this.month);
this.daysArr = this.generateArray(1, this.days)
this.weekday = this.getWeekday(this.year, this.month);
this.weekdayArr = this.generateArray(2, this.weekday)
this.showTitle = `${this.year}年${this.month}月`;
if (this.isChange && this.mode == 'date') {
this.btnFix(true);
}
},
dateClick: function (day) {
day += 1;
if (!this.openDisAbled(this.year, this.month, day)) {
this.day = day;
this.getYearWeek()
}
},
close () {
// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
this.$emit('input', false);
},
getWeekText (date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
let week = date.getDay();
return '星期' + ['一', '二', '三', '四', '五', '六','日'][week];
},
btnFix (show) {
if (!show) {
this.close();
}
if (!this.startDate || !this.endDate) return;
this.$emit('change', {
year: this.year,
yearWeek:this.yearWeek
});
},
getYearWeek(){
var cur = new Date(`${this.year}/${this.month}/${this.day}`);
var curTime = cur.getTime();
var curDay = cur.getDay();
var oneDayTime = 24 * 60 * 60 * 1000;
//显示周一
var MondayTime = curTime - (curDay-1) * oneDayTime;
//显示周日
var SundayTime = curTime + (7 - curDay) * oneDayTime;
//初始化日期时间
var monday = new Date(MondayTime);
var sunday = new Date(SundayTime);
this.startDate = `${monday.getFullYear()}-${monday.getMonth()+1}-${monday.getDate()}`
this.endDate = `${sunday.getFullYear()}-${sunday.getMonth()+1}-${sunday.getDate()}`
this.startDay = monday.getDate();
this.endDay = sunday.getDate()
//计算当前是本年第几周
const dateFirst = new Date(this.year, 0, 1)
const dataNumber = Math.round((cur.valueOf() - dateFirst.valueOf()) / oneDayTime)
this.yearWeek = Math.ceil((dataNumber + dateFirst.getDay()) / 7)
}
}
};
</script>
<style scoped lang="scss">
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
@mixin vue-flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: $direction;
/* #endif */
}
.u-calendar {
color: $u-content-color;
&__header {
width: 100%;
box-sizing: border-box;
font-size: 30rpx;
background-color: #fff;
color: $u-main-color;
&__text {
margin-top: 30rpx;
padding: 0 60rpx;
@include vue-flex;
justify-content: center;
align-items: center;
}
}
&__action {
padding: 40rpx 0 40rpx 0;
&__icon {
margin: 0 16rpx;
}
&__text {
padding: 0 16rpx;
color: $u-main-color;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
}
&__week-day {
@include vue-flex;
align-items: center;
justify-content: center;
padding: 6px 0;
overflow: hidden;
&__text {
flex: 1;
text-align: center;
}
}
&__content {
width: 100%;
@include vue-flex;
flex-wrap: wrap;
padding: 6px 0;
box-sizing: border-box;
background-color: #fff;
position: relative;
&--end-date {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
&--start-date {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
&__item {
width: 14.2857%;
@include vue-flex;
align-items: center;
justify-content: center;
padding: 6px 0;
overflow: hidden;
position: relative;
z-index: 2;
&__inner {
height: 84rpx;
@include vue-flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 32rpx;
position: relative;
border-radius: 50%;
&__desc {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
transform: scale(0.75);
transform-origin: center center;
position: absolute;
left: 0;
text-align: center;
bottom: 2rpx;
}
}
&__tips {
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
position: absolute;
left: 0;
transform: scale(0.8);
transform-origin: center center;
text-align: center;
bottom: 8rpx;
z-index: 2;
}
}
&__bg-month {
position: absolute;
font-size: 130px;
line-height: 130px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #e4e7ed;
z-index: 1;
}
}
&__bottom {
width: 100%;
@include vue-flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding: 0 40rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
color: $u-tips-color;
&__choose {
height: 50rpx;
}
&__btn {
width: 100%;
}
}
}
</style>
