639 lines
25 KiB
Vue
639 lines
25 KiB
Vue
<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': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
|
||
'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
|
||
}" :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 class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
|
||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
|
||
</view>
|
||
<view class="u-calendar__content__bg-month">{{month}}</view>
|
||
</view>
|
||
<view class="u-calendar__bottom">
|
||
<view class="u-calendar__bottom__choose">
|
||
<text>{{mode == 'date' ? activeDate : 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>
|
||
/**
|
||
* calendar 日历
|
||
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
|
||
* @tutorial http://uviewui.com/components/calendar.html
|
||
* @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
|
||
* @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
|
||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
|
||
* @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
|
||
* @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
|
||
* @property {String Number} max-year 可切换的最大年份(默认2050)
|
||
* @property {String Number} min-year 最小可选日期(默认1950)
|
||
* @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
|
||
* @property {String Number} max-date 最大可选日期(默认当前日期)
|
||
* @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
|
||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
|
||
* @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
|
||
* @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
|
||
* @property {String} color 日期字体的默认颜色(默认#303133)
|
||
* @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
|
||
* @property {String Number} z-index 弹出时的z-index值(默认10075)
|
||
* @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
|
||
* @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
|
||
* @property {String} range-color 选择范围内字体颜色(默认#2979ff)
|
||
* @property {String} start-text 起始日期底部的提示文字(默认 '开始')
|
||
* @property {String} end-text 结束日期底部的提示文字(默认 '结束')
|
||
* @property {String} btn-type 底部确定按钮的主题(默认 'primary')
|
||
* @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
|
||
* @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
|
||
* @example <u-calendar v-model="show" :mode="mode"></u-calendar>
|
||
*/
|
||
|
||
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
|
||
},
|
||
// date-单个日期选择，range-开始日期+结束日期选择
|
||
mode: {
|
||
type: String,
|
||
default: 'date'
|
||
},
|
||
// 可切换的最大年份
|
||
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'
|
||
},
|
||
// mode=range时生效，起始日期自定义文案
|
||
startText: {
|
||
type: String,
|
||
default: '开始'
|
||
},
|
||
// mode=range时生效，结束日期自定义文案
|
||
endText: {
|
||
type: String,
|
||
default: '结束'
|
||
},
|
||
//按钮样式类型
|
||
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: '选择日期'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 星期几,值为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: '',
|
||
activeDate: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
isStart: true,
|
||
min: null,
|
||
max: null,
|
||
weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
|
||
};
|
||
},
|
||
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()
|
||
},
|
||
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, '/')
|
||
if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
|
||
color = type == 1 ? this.activeBgColor : this.activeColor;
|
||
} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
|
||
color = type == 1 ? this.rangeBgColor : this.rangeColor;
|
||
}
|
||
return color;
|
||
},
|
||
init() {
|
||
let now = new Date();
|
||
this.year = now.getFullYear();
|
||
this.month = now.getMonth() + 1;
|
||
this.day = now.getDate();
|
||
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
|
||
this.activeDate = this.today;
|
||
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.isStart = true;
|
||
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;
|
||
},
|
||
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(1,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;
|
||
let date = `${this.year}-${this.month}-${day}`;
|
||
if (this.mode == 'date') {
|
||
this.activeDate = date;
|
||
} else {
|
||
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
|
||
if (this.isStart || compare) {
|
||
this.startDate = date;
|
||
this.startYear = this.year;
|
||
this.startMonth = this.month;
|
||
this.startDay = this.day;
|
||
this.endYear = 0;
|
||
this.endMonth = 0;
|
||
this.endDay = 0;
|
||
this.endDate = "";
|
||
this.activeDate = "";
|
||
this.isStart = false;
|
||
} else {
|
||
this.endDate = date;
|
||
this.endYear = this.year;
|
||
this.endMonth = this.month;
|
||
this.endDay = this.day;
|
||
this.isStart = true;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
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.mode == 'date') {
|
||
let arr = this.activeDate.split('-')
|
||
let year = this.isChange ? this.year : Number(arr[0]);
|
||
let month = this.isChange ? this.month : Number(arr[1]);
|
||
let day = this.isChange ? this.day : Number(arr[2]);
|
||
//当前月有多少天
|
||
let days = this.getMonthDay(year, month);
|
||
let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||
let weekText = this.getWeekText(result);
|
||
let isToday = false;
|
||
if (`${year}-${month}-${day}` == this.today) {
|
||
//今天
|
||
isToday = true;
|
||
}
|
||
this.$emit('change', {
|
||
year: year,
|
||
month: month,
|
||
day: day,
|
||
days: days,
|
||
result: result,
|
||
week: weekText,
|
||
isToday: isToday,
|
||
// switch: show //是否是切换年月操作
|
||
});
|
||
} else {
|
||
if (!this.startDate || !this.endDate) return;
|
||
let startMonth = this.formatNum(this.startMonth);
|
||
let startDay = this.formatNum(this.startDay);
|
||
let startDate = `${this.startYear}-${startMonth}-${startDay}`;
|
||
let startWeek = this.getWeekText(startDate)
|
||
|
||
let endMonth = this.formatNum(this.endMonth);
|
||
let endDay = this.formatNum(this.endDay);
|
||
let endDate = `${this.endYear}-${endMonth}-${endDay}`;
|
||
let endWeek = this.getWeekText(endDate);
|
||
this.$emit('change', {
|
||
startYear: this.startYear,
|
||
startMonth: this.startMonth,
|
||
startDay: this.startDay,
|
||
startDate: startDate,
|
||
startWeek: startWeek,
|
||
endYear: this.endYear,
|
||
endMonth: this.endMonth,
|
||
endDay: this.endDay,
|
||
endDate: endDate,
|
||
endWeek: endWeek
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "../../libs/css/style.components.scss";
|
||
|
||
.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> |