yunshangxie/tuniao-ui/components/tn-calendar/tn-calendar.vue

708 lines
20 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<tn-popup
v-model="value"
mode="bottom"
:popup="false"
length="auto"
:borderRadius="borderRadius"
:safeAreaInsetBottom="safeAreaInsetBottom"
:maskCloseable="maskCloseable"
:closeBtn="closeBtn"
:zIndex="elIndex"
@close="close"
>
<view class="tn-calendar-class tn-calendar">
<!-- 头部 -->
<view class="tn-calendar__header">
<view v-if="!$slots.tooltip || !$slots.$tooltip" class="tn-calendar__header__text">
{{ toolTips }}
</view>
<view v-else>
<slot name="tooltip"></slot>
</view>
</view>
<!-- 操作提示信息 -->
<view class="tn-calendar__action">
<view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(false)">
<view><text class="tn-icon-left"></text></view>
</view>
<view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(false)">
<view><text class="tn-icon-left"></text></view>
</view>
<view class="tn-calendar__action__text">{{ dateTitle }}</view>
<view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(true)">
<view><text class="tn-icon-right"></text></view>
</view>
<view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(true)">
<view><text class="tn-icon-right"></text></view>
</view>
</view>
<!-- 星期中文标识 -->
<view class="tn-calendar__week-day-zh">
<view v-for="(item,index) in weekDayZh" :key="index" class="tn-calendar__week-day-zh__text">{{ item }}</view>
</view>
<!-- 日历主体 -->
<view class="tn-calendar__content">
<!-- 前置空白部分 -->
<block v-for="(item, index) in weekdayArr" :key="index">
<view class="tn-calendar__content__item"></view>
</block>
<view
v-for="(item, index) in daysArr"
:key="index"
class="tn-calendar__content__item"
:class="{
'tn-hover': disabledChoose(year, month, index + 1),
'tn-calendar__content--start-date': (mode === 'range' && startDate == `${year}-${month}-${index+1}`) || mode === 'date',
'tn-calendar__content--end-date': (mode === 'range' && endDate == `${year}-${month}-${index+1}`) || mode === 'date'
}"
:style="{
backgroundColor: colorValue(index, 'bg')
}"
@tap.stop="dateClick(index)"
>
<view class="tn-calendar__content__item__text" :style="{color: colorValue(index, 'text')}">
<view>{{ item.day }}</view>
</view>
<view class="tn-calendar__content__item__tips" :style="{color: item.color}">
{{ item.bottomInfo }}
</view>
</view>
<view class="tn-calendar__content__month--bg">{{ month }}</view>
</view>
<!-- 底部 -->
<view class="tn-calendar__bottom">
<view class="tn-calendar__bottom__choose">
<text>{{ mode === 'date' ? activeDate : startDate }}</text>
<text v-if="endDate">至{{ endDate }}</text>
</view>
<view class="tn-calendar__bottom__btn" :style="{backgroundColor: btnColor}" @click="handleBtnClick(false)">
<view class="tn-calendar__bottom__btn--text">确定</view>
</view>
</view>
</view>
</tn-popup>
</template>
<script>
import Calendar from '../../libs/utils/calendar.js'
export default {
name: 'tn-calendar',
props: {
// 双向绑定控制组件弹出与收起
value: {
type: Boolean,
default: false
},
// 模式
// date -> 单日期 range -> 日期范围
mode: {
type: String,
default: 'date'
},
// 是否允许切换年份
changeYear: {
type: Boolean,
default: true
},
// 是否允许切换月份
changeMonth: {
type: Boolean,
default: true
},
// 可切换的最大年份
maxYear: {
type: [Number, String],
default: 2100
},
// 可切换的最小年份
minYear: {
type: [Number, String],
default: 1970
},
// 最小日期(不在范围被不允许选择)
minDate: {
type: String,
default: '1970-01-01'
},
// 最大日期,如果为空则默认为今天
maxDate: {
type: String,
default: ''
},
// 切换月份按钮的颜色
monthArrowColor: {
type: String,
default: '#AAAAAA'
},
// 切换年份按钮的颜色
yearArrowColor: {
type: String,
default: '#C8C8C8'
},
// 默认字体颜色
color: {
type: String,
default: '#080808'
},
// 选中|起始结束日期背景颜色
activeBgColor: {
type: String,
default: '#01BEFF'
},
// 选中|起始结束日期文字颜色
activeColor: {
type: String,
default: '#FFFFFF'
},
// 范围日期内的背景颜色
rangeBgColor: {
type: String,
default: '#E6E6E655'
},
// 范围日期内的文字颜色
rangeColor: {
type: String,
default: '#01BEFF'
},
// 起始日期显示的文字mode=range时生效
startText: {
type: String,
default: '开始'
},
// 结束日期显示的文字mode=range时生效
endText: {
type: String,
default: '结束'
},
// 按钮背景颜色
btnColor: {
type: String,
default: '#01BEFF'
},
// 农历文字的颜色
lunarColor: {
type: String,
default: '#AAAAAA'
},
// 选中日期是否有选中效果
isActiveCurrent: {
type: Boolean,
default: true
},
// 切换年月是否触发事件mode=date时生效
isChange: {
type: Boolean,
default: false
},
// 是否显示农历
showLunar: {
type: Boolean,
default: true
},
// 顶部提示文字
toolTips: {
type: String,
default: '请选择日期'
},
// 显示圆角的大小
borderRadius: {
type: Number,
default: 8
},
// 是否开启底部安全区适配开启的话会在iPhoneX机型底部添加一定的内边距
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否可以通过点击遮罩进行关闭
maskCloseable: {
type: Boolean,
default: true
},
// zIndex
zIndex: {
type: Number,
default: 0
},
// 是否显示关闭按钮
closeBtn: {
type: Boolean,
default: false
},
},
computed: {
dateChange() {
return `${this.mode}-${this.minDate}-${this.maxDate}`
},
elIndex() {
return this.zIndex ? this.zIndex : this.$tn.zIndex.popup
},
colorValue() {
return (index, type) => {
let color = type === 'bg' ? '' : 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.mode === 'date' && this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
color = type === 'bg' ? this.activeBgColor : this.activeColor
} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
color = type === 'bg' ? this.rangeBgColor : this.rangeColor
}
return color
}
}
},
data() {
return {
// 星期几1-7
weekday: 1,
weekdayArr: [],
// 星期对应的中文
weekDayZh: ['日','一','二','三','四','五','六'],
// 当前月有多少天
days: 0,
daysArr: [],
year: 2021,
month: 0,
day: 0,
startYear: 0,
startMonth: 0,
startDay: 0,
endYear: 0,
endMonth: 0,
endDay: 0,
today: '',
activeDate: '',
startDate: '',
endDate: '',
min: null,
max: null,
// 日期标题
dateTitle: '',
// 标记是否已经选择了开始日期
chooseStart: false
}
},
watch: {
dateChange() {
this.init()
}
},
created() {
this.init()
},
methods: {
// 初始化
init() {
let now = new Date()
this.year = now.getFullYear()
this.month = now.getMonth() + 1
this.day = now.getDate()
this.today = `${this.year}-${this.month}-${this.day}`
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.endDate = ''
this.endYear = 0
this.endMonth = 0
this.endDay = 0
this.chooseStart = false
this.changeData()
},
// 切换月份
changeMonthHandler(add) {
if (add) {
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(add) {
let year = add ? this.year + 1 : this.year - 1
if (!this.checkRange(year)) {
this.year = year
this.changeData()
}
},
// 日期点击事件
dateClick(day) {
day += 1
if (!this.disabledChoose(this.year, this.month, day)) {
this.day = day
let date = `${this.year}-${this.month}-${day}`
if (this.mode === 'date') {
this.activeDate = date
} else {
let startTimeCompare = new Date(date.replace(/\-/g,'/')).getTime() < new Date(this.startDate.replace(/\-/g,'/')).getTime()
if (!this.chooseStart || startTimeCompare) {
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.chooseStart = true
} else {
this.endDate = date
this.endYear = this.year
this.endMonth = this.month
this.endDay = this.day
this.chooseStart = false
}
}
this.daysArr = this.handleDaysArr()
}
},
// 修改日期数据
changeData() {
this.days = this.getMonthDay(this.year, this.month)
this.daysArr = this.handleDaysArr()
this.weekday = this.getMonthFirstWeekDay(this.year, this.month)
this.weekdayArr = this.generateArray(1, this.weekday)
this.dateTitle = `${this.year}${this.month}`
if (this.isChange && this.mode === 'date') {
this.handleBtnClick(true)
}
},
// 处理按钮点击
handleBtnClick(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.formatNumber(month)}-${this.formatNumber(day)}`
let weekText = this.getWeekText(result)
let isToday = false
if (`${year}-${month}-${day}` === this.today) {
isToday = true
}
this.$emit('change', {
year,
month,
day,
days,
week: weekText,
isToday,
date: result,
// 是否为切换年月操作
switch: show
})
} else {
if (!this.startDate || !this.endDate) return
let startMonth = this.formatNumber(this.startMonth)
let startDay = this.formatNumber(this.startDay)
let startDate = `${this.startYear}-${startMonth}-${startDay}`
let startWeek = this.getWeekText(startDate)
let endMonth = this.formatNumber(this.endMonth)
let endDay = this.formatNumber(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,
startWeek,
endYear: this.endYear,
endMonth: this.endMonth,
endDay: this.endDay,
endDate,
endWeek
})
}
},
// 判断是否允许选择
disabledChoose(year, month, day) {
let flag = true
let date = `${year}/${month}/${day}`
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()) {
flag = false
}
return flag
},
// 检查是否在日期范围内
checkRange(year) {
let overstep = false
if (year < this.minYear || year > this.maxYear) {
uni.showToast({
title: '所选日期超出范围',
icon: 'none'
})
overstep = true
}
return overstep
},
// 处理日期
initDate(date) {
let fdate = date.split('-')
return {
year: Number(fdate[0] || 1970),
month: Number(fdate[1] || 1),
day: Number(fdate[2] || 1)
}
},
// 处理日期数组
handleDaysArr() {
let days = this.generateArray(1, this.days)
let daysArr = days.map((item) => {
let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : ''
let color = this.showLunar ? this.lunarColor : this.activeColor
if (
(this.mode === 'date' && this.day == item) ||
(this.mode === 'range' && (this.startDay == item || this.endDay == item))
) {
color = this.activeColor
}
if (this.mode === 'range') {
if (this.startDay == item && this.startDay != this.endDay) {
bottomInfo = this.startText
}
if (this.endDay == item) {
bottomInfo = this.endText
}
}
return {
day: item,
color: color,
bottomInfo: bottomInfo
}
})
return daysArr
},
// 获取对应月有多少天
getMonthDay(year, month) {
return new Date(year, month, 0).getDate()
},
// 获取对应月的第一天时星期几
getMonthFirstWeekDay(year, month) {
return new Date(`${year}/${month}/01 00:00:00`).getDay()
},
// 获取对应星期的文本
getWeekText(date) {
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`)
let week = date.getDay()
return '星期' + this.weekDayZh[week]
},
// 生成日期天数数组
generateArray(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start)
},
// 格式化数字
formatNumber(num) {
return num < 10 ? '0' + num : num + ''
},
// 关闭窗口
close() {
this.$emit('input', false)
}
}
}
</script>
<style lang="scss" scoped>
.tn-calendar {
color: $tn-font-color;
&__header {
width: 100%;
box-sizing: border-box;
font-size: 30rpx;
background-color: #FFFFFF;
color: $tn-main-color;
&__text {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 30rpx;
padding: 0 60rpx;
}
}
&__action {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 40rpx 0 40rpx 0;
&__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 16rpx;
width: 32rpx;
height: 32rpx;
font-size: 20rpx;
// line-height: 32rpx;
border-radius: 50%;
color: #FFFFFF;
}
&__text {
padding: 0 16rpx;
color: $tn-font-color;
font-size: 32rpx;
font-weight: bold;
}
}
&__week-day-zh {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12rpx 0;
overflow: hidden;
box-shadow: 16rpx 6rpx 8rpx 0 #E6E6E6;
margin-bottom: 2rpx;
&__text {
flex: 1;
text-align: center;
}
}
&__content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
padding: 12rpx 0;
box-sizing: border-box;
background-color: #F7F7F7;
position: relative;
&__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 14.2857%;
padding: 12rpx 0;
margin: 6rpx 0;
overflow: hidden;
position: relative;
z-index: 2;
// box-shadow: inset 0rpx 0rpx 22rpx 4rpx rgba(255,255,255, 0.52);
&__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80rpx;
font-size: 32rpx;
position: relative;
}
&__tips {
position: absolute;
width: 100%;
line-height: 24rpx;
left: 0;
bottom: 8rpx;
text-align: center;
z-index: 2;
transform-origin: center center;
transform: scale(0.8);
}
}
&--start-date {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
&--end-date {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
&__month {
&--bg {
position: absolute;
font-size: 200rpx;
line-height: 200rpx;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: $tn-font-holder-color;
z-index: 1;
}
}
}
&__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
background-color: #F7F7F7;
padding: 0 40rpx 30rpx;
box-sizing: border-box;
font-size: 24rpx;
color: $tn-font-sub-color;
&__choose {
height: 50rpx;
}
&__btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60rpx;
border-radius: 40rpx;
color: #FFFFFF;
font-size: 28rpx;
}
}
}
</style>