960 lines
25 KiB
Vue
960 lines
25 KiB
Vue
<template>
|
||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（会员ID：2 0 49，营业执照号： 9 1 6 5 0 10 4 MA 79 5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<view class="fui-calendar__wrap" :style="{width:dateWidth,background:background}">
|
||
<view class="fui-calendar__header">
|
||
<view class="fui-calendar__icon-left" :class="['fui-calendar__pl']" @tap.stop="changeYear(-1)">
|
||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||
</view>
|
||
<view class="fui-calendar__icon-left" :class="['fui-calendar__pl']" @tap.stop="changeMonth(-1)"
|
||
v-if="!isMultiple">
|
||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||
</view>
|
||
<text class="fui-calendar__title"
|
||
:style="{width:yearsWidth+'rpx',fontSize:yearsSize+'rpx',lineHeight:yearsSize+'rpx',color:yearsColor}">{{title}}</text>
|
||
<view class="fui-calendar__pl" @tap.stop="changeMonth(1)" v-if="!isMultiple">
|
||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||
</view>
|
||
<view class="fui-calendar__pl" @tap.stop="changeYear(1)">
|
||
<fui-icon :name="name" :color="arrowColor" :size="arrowSize"></fui-icon>
|
||
</view>
|
||
</view>
|
||
<view class="fui-calendar__date-header" :style="{borderBottomColor:lineColor}">
|
||
<text class="fui-calendar__date" :style="{color:titleColor,width:itemWidth}" v-for="(item,index) in header"
|
||
:key="index">{{item}}</text>
|
||
<!-- #ifndef APP-NVUE -->
|
||
<view class="fui-calendar__border" :style="{background:lineColor}"></view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<swiper :indicator-dots="false" :autoplay="false" :current="defCurrent" :duration="300" :vertical="vertical"
|
||
@change="swiperChange" class="fui-calendar__swiper" style="height: 648rpx;" v-if="isMultiple">
|
||
<swiper-item v-for="(item,index) in monthArr" :key="item.key">
|
||
<view class="fui-calendar__date-wrap">
|
||
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
|
||
v-for="(week,i) in item.weekdayArr" :key="week"></view>
|
||
<!--vue3中text嵌套text会出现警告和部分错误信息-->
|
||
<view class="fui-calendar__date"
|
||
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(index,idx),'fui-calendar__left-radius':_isRadius(index,idx,true),'fui-calendar__right-radius':_isRadius(index,idx)}"
|
||
v-for="(sub,idx) in item.daysArr" :key="idx" @tap.stop="dateClick(index,sub)"
|
||
:style="{background:getBackground(index,idx,values),width:itemWidth}">
|
||
<text class="fui-calendar__date-val" :style="{color:getColor(index,idx,values)}">{{sub}}</text>
|
||
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
|
||
:style="{color:getColor(index,idx,values)}">{{getText(index,idx) || descrArr[idx]}}</text>
|
||
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
|
||
:style="{color:getColor(index,idx,values)}">{{getText(index,idx) || descrArr[idx]}}</text>
|
||
<view class="fui-calendar__badge"
|
||
:style="{background:badgeColor || dangerColor,right:badgeRight+'rpx',top:badgeTop+'rpx'}"
|
||
v-if="badgeArr[idx]">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="fui-calendar__swiper" v-else>
|
||
<view class="fui-calendar__date-wrap">
|
||
<view class="fui-calendar__date" :style="{width:itemWidth}" :class="['fui-calendar__dh']"
|
||
v-for="(week,i) in singleMonth.weekdayArr" :key="week"></view>
|
||
<!--vue3中text嵌套text会出现警告和部分错误信息-->
|
||
<view class="fui-calendar__date"
|
||
:class="{'fui-calendar__dh':true,'fui-calendar__diaabled':_isDisAbled(month-1,idx),'fui-calendar__left-radius':_isRadius(month-1,idx,true),'fui-calendar__right-radius':_isRadius(month-1,idx)}"
|
||
v-for="(sub,idx) in singleMonth.daysArr" :key="idx" @tap.stop="dateClick(month-1,sub)"
|
||
:style="{background:getBackground(month-1,idx,values),width:itemWidth}">
|
||
<text class="fui-calendar__date-val" :style="{color:getColor(month-1,idx,values)}">{{sub}}</text>
|
||
<text class="fui-calendar__date-lunar" v-if="showLunar && language!=='en'"
|
||
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx) || descrArr[idx]}}</text>
|
||
<text class="fui-calendar__date-descr" v-if="!showLunar || language==='en'"
|
||
:style="{color:getColor(month-1,idx,values)}">{{getText(month-1,idx) || descrArr[idx]}}</text>
|
||
<view class="fui-calendar__badge"
|
||
:style="{background:badgeColor || dangerColor,right:badgeRight+'rpx',top:badgeTop+'rpx'}"
|
||
v-if="badgeArr[idx]">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fui-calendar__btn-wrap" v-if="showBtn">
|
||
<view class="fui-calendar__btn" :class="{'fui-calendar__diaabled':btnDisabled}"
|
||
:style="{background:btnBackground || primaryColor}">
|
||
<text class="fui-calendar__btn"
|
||
:class="{'fui-calendar__btn-text':true,'fui-calendar__btn-active':!btnDisabled}"
|
||
:style="{color:btnColor}" @tap.stop="handleClick">{{btnText}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import lunar from './index.js';
|
||
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
|
||
export default {
|
||
name: "fui-calendar",
|
||
emits: ['change', 'dateChange'],
|
||
// components: {
|
||
// fuiIcon
|
||
// },
|
||
props: {
|
||
type: {
|
||
type: [Number, String],
|
||
default: 1
|
||
},
|
||
value: {
|
||
type: [Array, String],
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
//v2.0.0+ 最多可选天数，type=2 || type=3有效
|
||
maxDays: {
|
||
type: [Number, String],
|
||
default: -1
|
||
},
|
||
minDate: {
|
||
type: String,
|
||
default: '2010-01-01'
|
||
},
|
||
maxDate: {
|
||
type: String,
|
||
default: '2030-12-31'
|
||
},
|
||
showLunar: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
language: {
|
||
type: String,
|
||
default: 'cn'
|
||
},
|
||
isMultiple: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
vertical: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
width: {
|
||
type: [Number, String],
|
||
default: 0
|
||
},
|
||
background: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
name: {
|
||
type: String,
|
||
default: 'roundright-fill'
|
||
},
|
||
arrowSize: {
|
||
type: [Number, String],
|
||
default: 40
|
||
},
|
||
arrowColor: {
|
||
type: String,
|
||
default: '#7F7F7F'
|
||
},
|
||
yearsWidth: {
|
||
type: [Number, String],
|
||
default: 200
|
||
},
|
||
yearsSize: {
|
||
type: [Number, String],
|
||
default: 32
|
||
},
|
||
yearsColor: {
|
||
type: String,
|
||
default: '#181818'
|
||
},
|
||
titleColor: {
|
||
type: String,
|
||
default: '#181818'
|
||
},
|
||
lineColor: {
|
||
type: String,
|
||
default: '#EEEEEE'
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: '#181818'
|
||
},
|
||
activeColor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
//选中日期背景色
|
||
activeBackground: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
rangeColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
rangeBackground: {
|
||
type: String,
|
||
default: '#F1F4FA'
|
||
},
|
||
start: {
|
||
type: String,
|
||
default: '开始'
|
||
},
|
||
end: {
|
||
type: String,
|
||
default: '结束'
|
||
},
|
||
isToday: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showBtn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
btnText: {
|
||
type: String,
|
||
default: '确定'
|
||
},
|
||
btnBackground: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
btnColor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
//v2.2.0+
|
||
badgeColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//v2.2.0+
|
||
badgeTop: {
|
||
type: [Number, String],
|
||
default: 16
|
||
},
|
||
//v2.2.0+
|
||
badgeRight: {
|
||
type: [Number, String],
|
||
default: 16
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
lang: [],
|
||
header: [],
|
||
monthArr: [],
|
||
singleMonth: {
|
||
weekdayArr: [],
|
||
daysArr: []
|
||
},
|
||
descrArr: [],
|
||
badgeArr: [],
|
||
dateWidth: '100%',
|
||
title: '',
|
||
year: 0,
|
||
month: 1,
|
||
today: '',
|
||
minArr: [],
|
||
maxArr: [],
|
||
values: [],
|
||
defCurrent: 0,
|
||
btnDisabled: false
|
||
};
|
||
},
|
||
computed: {
|
||
initChange() {
|
||
return `${this.type}-${this.minDate}-${this.maxDate}-${this.value}`;
|
||
},
|
||
itemWidth() {
|
||
// #ifdef APP-NVUE
|
||
return (Number(this.dateWidth.replace('px', '').replace('%', '')) - 1) / 7 + 'px'
|
||
// #endif
|
||
|
||
// #ifndef APP-NVUE
|
||
return '14.2857%'
|
||
// #endif
|
||
},
|
||
primaryColor() {
|
||
const app = uni && uni.$fui && uni.$fui.color;
|
||
return (app && app.primary) || '#465CFF';
|
||
},
|
||
dangerColor() {
|
||
const app = uni && uni.$fui && uni.$fui.color;
|
||
return (app && app.danger) || '#FF2B2B';
|
||
}
|
||
},
|
||
watch: {
|
||
width(val) {
|
||
this.getWidth(val)
|
||
},
|
||
language(val) {
|
||
this.setLang(val);
|
||
},
|
||
values(vals) {
|
||
this._btnDisabled(vals);
|
||
},
|
||
initChange(vals) {
|
||
this.init();
|
||
},
|
||
isMultiple(val) {
|
||
if (!val) {
|
||
this.singleMonth = this.monthArr[this.month - 1]
|
||
}
|
||
},
|
||
title(val) {
|
||
if (this.year === 0) return;
|
||
this.descrArr = []
|
||
this.badgeArr = []
|
||
this.$emit('dateChange', {
|
||
year: this.year,
|
||
month: this.month
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.setLang(this.language);
|
||
this.getWidth(this.width)
|
||
this.init();
|
||
this._btnDisabled(this.values);
|
||
},
|
||
methods: {
|
||
_btnDisabled(vals) {
|
||
if (this.type == 3 && vals.length < 2) {
|
||
this.btnDisabled = true
|
||
} else {
|
||
this.btnDisabled = false
|
||
}
|
||
},
|
||
setLang(val) {
|
||
this.header = lunar.lang[`h_${val}`] || lunar.lang.h_cn
|
||
this.setTitle()
|
||
},
|
||
getWidth(val) {
|
||
//宽度值不宜太低
|
||
let dw = Number(val);
|
||
if (dw && dw >= 600) {
|
||
dw = uni.upx2px(dw)
|
||
} else {
|
||
let sys = uni.getSystemInfoSync()
|
||
dw = sys.windowWidth
|
||
}
|
||
// #ifndef APP-NVUE
|
||
this.dateWidth = val ? dw + 'px' : '100%';
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
this.dateWidth = dw + 'px';
|
||
// #endif
|
||
},
|
||
swiperChange(e) {
|
||
let current = e.detail.current
|
||
const month = current + 1
|
||
this.month = month
|
||
this.title = this.language === 'en' ? `${lunar.lang.m_en[month-1]} ${this.year}` :
|
||
`${this.year}年${month}月`;
|
||
},
|
||
getLunar(month, day) {
|
||
let obj = lunar.solarTolunar(this.year, month, day);
|
||
return obj.IDayCn;
|
||
},
|
||
initDate(date) {
|
||
if (!date || date === true || date === 'true') return '';
|
||
let fdate = date.replace(/\-/g, '/').split('/');
|
||
return [Number(fdate[0] || -1), Number(fdate[1] || -1), Number(fdate[2] || -1)]
|
||
},
|
||
formatNum(num) {
|
||
num = Number(num)
|
||
return num < 10 ? '0' + Math.abs(num) : num + '';
|
||
},
|
||
compareDate(arr) {
|
||
if (!arr && arr.length === 0) return -1;
|
||
let timestamp = []
|
||
let indexs = {}
|
||
arr.forEach((item, index) => {
|
||
let d = item.replace(/\-/g, '/');
|
||
d = `${d} 00:00:00`
|
||
let stamp = new Date(d).getTime()
|
||
timestamp.push(stamp)
|
||
indexs[stamp.toString()] = index
|
||
})
|
||
let newArr = []
|
||
while (timestamp.length > 0) {
|
||
let min = Math.min(...timestamp)
|
||
let index = indexs[min.toString()]
|
||
newArr.push(arr[index])
|
||
timestamp.splice(timestamp.indexOf(min), 1)
|
||
}
|
||
return newArr;
|
||
},
|
||
toArray(start, end) {
|
||
return Array.from(new Array(end + 1).keys()).slice(start);
|
||
},
|
||
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();
|
||
},
|
||
_isSection(date, start, end) {
|
||
let ts = new Date(date.replace(/\-/g, '/')).getTime();
|
||
let s = new Date(start.replace(/\-/g, '/')).getTime();
|
||
let e = new Date(end.replace(/\-/g, '/')).getTime();
|
||
return ts > s && ts < e;
|
||
},
|
||
getColor(index, idx, values) {
|
||
let color = this.color;
|
||
if (!values || values.length === 0) return color;
|
||
let month = this.formatNum(index + 1);
|
||
let day = this.formatNum(idx + 1);
|
||
let date = `${this.year}-${month}-${day}`
|
||
let type = this.type;
|
||
if (type == 3) {
|
||
if (~values.indexOf(date)) {
|
||
color = this.activeColor
|
||
} else if (values[1] && this._isSection(date, values[0], values[1])) {
|
||
color = this.rangeColor || this.primaryColor
|
||
}
|
||
} else {
|
||
if (~values.indexOf(date)) {
|
||
color = this.activeColor
|
||
}
|
||
}
|
||
return color
|
||
},
|
||
getBackground(index, idx, values) {
|
||
let background = 'transparent';
|
||
if (!values || values.length === 0) return background;
|
||
let month = this.formatNum(index + 1);
|
||
let day = this.formatNum(idx + 1);
|
||
let date = `${this.year}-${month}-${day}`
|
||
let type = this.type;
|
||
if (type == 3) {
|
||
if (~values.indexOf(date)) {
|
||
background = this.activeBackground || this.primaryColor
|
||
} else if (values[1] && this._isSection(date, values[0], values[1])) {
|
||
background = this.rangeBackground
|
||
}
|
||
} else {
|
||
if (~values.indexOf(date)) {
|
||
background = this.activeBackground || this.primaryColor
|
||
}
|
||
}
|
||
return background
|
||
},
|
||
getText(index, idx) {
|
||
let month = index + 1
|
||
let day = idx + 1
|
||
let text = '';
|
||
let date = `${this.year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||
if (this.type == 3) {
|
||
let values = this.values
|
||
if (values.length > 0) {
|
||
if (values[0] == date && values[0] != values[1]) {
|
||
let st = this.start;
|
||
text = st && st !== 'true' && st !== true ? st : '';
|
||
|
||
} else if (values[1] == date) {
|
||
let et = this.end;
|
||
text = et && et !== 'true' && et !== true ? et : '';
|
||
}
|
||
}
|
||
}
|
||
if (!text && !this.descrArr[idx]) {
|
||
text = this.showLunar ? this.getLunar(month, day) : ''
|
||
if (this.isToday) {
|
||
//今天 简繁同体
|
||
let td = this.language === 'en' ? 'Today' : '今天'
|
||
text = this.today === date ? td : text
|
||
}
|
||
}
|
||
return text;
|
||
},
|
||
_isRadius(index, idx, start) {
|
||
let radius = this.type != 3 ? true : false;
|
||
if (this.type == 3 && this.values && this.values.length > 0) {
|
||
let month = index + 1
|
||
let day = idx + 1
|
||
let date = `${this.year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||
if (start) {
|
||
radius = date === this.values[0]
|
||
} else {
|
||
radius = date === this.values[1]
|
||
}
|
||
}
|
||
return radius;
|
||
},
|
||
getMonthsArr(year) {
|
||
let monthArr = []
|
||
for (let i = 0; i < 12; i++) {
|
||
let month = i + 1;
|
||
let daysArr = this.toArray(1, this.getMonthDay(year, month));
|
||
let weekdayArr = this.toArray(1, this.getWeekday(year, month));
|
||
weekdayArr = weekdayArr.map(item => {
|
||
return `week_${i}_${item}`
|
||
})
|
||
monthArr.push({
|
||
key: `m_${month}`,
|
||
weekdayArr,
|
||
daysArr
|
||
})
|
||
}
|
||
return monthArr
|
||
},
|
||
_isDisAbled(index, idx) {
|
||
let bool = false;
|
||
let date = `${this.year}/${index+1}/${idx+1}`;
|
||
let min = this.minArr.join('/')
|
||
let max = this.maxArr.join('/')
|
||
let ts = new Date(date).getTime();
|
||
if (ts < new Date(min).getTime() || ts > new Date(max).getTime()) {
|
||
bool = true;
|
||
}
|
||
return bool;
|
||
},
|
||
setTitle() {
|
||
if (this.year === 0) return;
|
||
this.title = this.language === 'en' ? `${lunar.lang.m_en[this.month-1]} ${this.year}` :
|
||
`${this.year}年${this.month}月`
|
||
},
|
||
init() {
|
||
const now = new Date();
|
||
let year = now.getFullYear();
|
||
let month = now.getMonth() + 1;
|
||
let day = now.getDate();
|
||
this.minArr = this.initDate(this.minDate) || [2010, 1, 1];
|
||
this.maxArr = this.initDate(this.maxDate) || [2030, 12, 31];
|
||
this.today = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`
|
||
let value = this.value;
|
||
let def = [-1]
|
||
if (value && value.length > 0) {
|
||
if (typeof value === 'string') {
|
||
def = this.initDate(value) || [-1, -1, -1]
|
||
value = [value]
|
||
} else {
|
||
const len = value.length
|
||
if (len > 1) {
|
||
value = this.compareDate(value)
|
||
}
|
||
if (this.type == 3 && value.length > 2) {
|
||
value = [value[0], value[1]]
|
||
}
|
||
def = this.initDate(value[len - 1]) || [-1, -1, -1]
|
||
if (def[0] !== -1) {
|
||
year = def[0]
|
||
month = def[1]
|
||
}
|
||
}
|
||
value = value.map(item => {
|
||
let arr = this.initDate(item)
|
||
return `${arr[0]}-${this.formatNum(arr[1])}-${this.formatNum(arr[2])}`
|
||
})
|
||
this.values = value;
|
||
} else {
|
||
this.year = year;
|
||
if (this._isDisAbled(month - 1, day - 1)) {
|
||
year = this.maxArr[0]
|
||
month = this.maxArr[1]
|
||
}
|
||
}
|
||
this.year = year;
|
||
this.month = month;
|
||
this.setTitle()
|
||
this.monthArr = this.getMonthsArr(year)
|
||
if (!this.isMultiple) {
|
||
this.singleMonth = this.monthArr[month - 1]
|
||
} else {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.defCurrent = month - 1;
|
||
}, 20)
|
||
})
|
||
}
|
||
},
|
||
checkYear(year) {
|
||
if (year < this.minArr[0] || year > this.maxArr[0]) {
|
||
uni.showToast({
|
||
title: '日期已超出可切换范围！',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
changeMonth(num) {
|
||
let month = num + this.month;
|
||
let year = 0;
|
||
if (num > 0) {
|
||
year = month > 12 ? this.year + 1 : this.year;
|
||
month = month > 12 ? 1 : month;
|
||
} else {
|
||
year = month < 1 ? this.year - 1 : this.year;
|
||
month = month < 1 ? 12 : month;
|
||
}
|
||
if (this.checkYear(year)) {
|
||
this.month = month;
|
||
this.year = year;
|
||
this.setTitle();
|
||
this.monthArr = this.getMonthsArr(year)
|
||
this.singleMonth = this.monthArr[this.month - 1]
|
||
}
|
||
},
|
||
changeYear(num) {
|
||
let year = num + this.year;
|
||
if (this.checkYear(year)) {
|
||
this.year = year;
|
||
if (this.isMultiple) {
|
||
this.month = 1;
|
||
this.defCurrent = 0;
|
||
}
|
||
this.setTitle();
|
||
this.monthArr = this.getMonthsArr(year)
|
||
if (!this.isMultiple) {
|
||
this.singleMonth = this.monthArr[this.month - 1]
|
||
}
|
||
}
|
||
},
|
||
getWeekText(date) {
|
||
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
|
||
let week = date.getDay();
|
||
//英文
|
||
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
if (this.language === 'en') {
|
||
weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||
}
|
||
return weeks[week];
|
||
},
|
||
dateClick(index, day) {
|
||
if (this.disabled) return;
|
||
if (!this._isDisAbled(index, day - 1)) {
|
||
let month = this.formatNum(index + 1);
|
||
let date = `${this.year}-${month}-${this.formatNum(day)}`;
|
||
let type = this.type;
|
||
let values = [...this.values]
|
||
if (type == 3) {
|
||
let start = values[0]
|
||
let sts = -1;
|
||
if (start) {
|
||
sts = new Date(start.replace(/\-/g, '/')).getTime()
|
||
}
|
||
let ets = new Date(date.replace(/\-/g, '/')).getTime()
|
||
if (start && values.length === 1 && sts <= ets) {
|
||
const dateMax = `${date} 23:59:59`
|
||
const etsMill = new Date(dateMax.replace(/\-/g, '/')).getTime()
|
||
const diff = etsMill - sts
|
||
const diffDays = Math.ceil(diff / 1000 / 60 / 60 / 24)
|
||
const maxDays = Number(this.maxDays)
|
||
if ((maxDays && maxDays > 0 && diffDays > maxDays) || maxDays === 0) {
|
||
uni.showToast({
|
||
title: `最多可选${maxDays}天，当前已超出可选范围`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
values.push(date)
|
||
} else {
|
||
values = [date]
|
||
}
|
||
} else {
|
||
let idx = values.indexOf(date)
|
||
if (idx != -1) {
|
||
values.splice(idx, 1)
|
||
} else {
|
||
const maxDays = Number(this.maxDays)
|
||
if ((maxDays && maxDays > 0 && values.length >= maxDays) || maxDays === 0) {
|
||
uni.showToast({
|
||
title: `最多可选${maxDays}天`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (type == 2) {
|
||
values.push(date)
|
||
} else {
|
||
values = [date]
|
||
}
|
||
}
|
||
}
|
||
this.values = values
|
||
setTimeout(() => {
|
||
if (!this.showBtn) {
|
||
this._change()
|
||
}
|
||
}, 0)
|
||
}
|
||
},
|
||
_change() {
|
||
let values = this.values
|
||
let type = this.type;
|
||
if (type == 3 && values.length < 2) return;
|
||
let value = '';
|
||
let week = '';
|
||
let lunarArr = {};
|
||
if (type == 1) {
|
||
value = values[0] || ''
|
||
if (value) {
|
||
week = this.getWeekText(value)
|
||
if (this.showLunar && this.language !== 'en') {
|
||
let d = this.initDate(value)
|
||
lunarArr = lunar.solarTolunar(d[0], d[1], d[2]);
|
||
}
|
||
}
|
||
} else {
|
||
value = values
|
||
week = [];
|
||
lunarArr = []
|
||
value.forEach(item => {
|
||
week.push(this.getWeekText(item))
|
||
if (this.showLunar && this.language !== 'en') {
|
||
let d = this.initDate(item)
|
||
lunarArr.push(lunar.solarTolunar(d[0], d[1], d[2]))
|
||
}
|
||
})
|
||
}
|
||
|
||
this.$emit('change', {
|
||
value: value,
|
||
week: week,
|
||
today: this.today,
|
||
lunar: lunarArr
|
||
})
|
||
},
|
||
handleClick() {
|
||
if (this.btnDisabled) return;
|
||
this._change()
|
||
},
|
||
// 传入一个返回Promise的函数，设置当前日历数据描述
|
||
//返回当前日历数据
|
||
setDescr(callback) {
|
||
const item = this.monthArr[this.month - 1]
|
||
if (item && callback && typeof callback === 'function') {
|
||
callback(this.year, this.month, item.daysArr).then(res => {
|
||
this.descrArr = res
|
||
}).catch(err => {
|
||
this.descrArr = []
|
||
})
|
||
}
|
||
},
|
||
// 传入一个返回Promise的函数，设置当前日历数据角标
|
||
//返回当前日历数据
|
||
setBadge(callback) {
|
||
const item = this.monthArr[this.month - 1]
|
||
if (item && callback && typeof callback === 'function') {
|
||
callback(this.year, this.month, item.daysArr).then(res => {
|
||
this.badgeArr = res
|
||
}).catch(err => {
|
||
this.badgeArr = []
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fui-calendar__header {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20rpx 0 30rpx;
|
||
}
|
||
|
||
.fui-calendar__title {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
white-space: nowrap;
|
||
/* #endif */
|
||
font-weight: normal;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.fui-calendar__icon-left {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.fui-calendar__pl {
|
||
padding-left: 16rpx;
|
||
}
|
||
|
||
.fui-calendar__pl:active {
|
||
opacity: .5;
|
||
}
|
||
|
||
.fui-calendar__date-header {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
border-bottom-width: 0;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
padding: 12rpx 0;
|
||
/* #ifdef APP-NVUE */
|
||
border-bottom-width: 0.5px;
|
||
border-bottom-style: solid;
|
||
/* #endif */
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.fui-calendar__border {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 1px;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
transform-origin: 0 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.fui-calendar__date-wrap {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
width: 100%;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
padding: 12rpx 0;
|
||
position: relative;
|
||
}
|
||
|
||
.fui-calendar__date {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
width: 14.2857%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
/* #endif */
|
||
text-align: center;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.fui-calendar__dh {
|
||
height: 104rpx;
|
||
}
|
||
|
||
.fui-calendar__left-radius {
|
||
border-top-left-radius: 8rpx;
|
||
border-bottom-left-radius: 8rpx;
|
||
}
|
||
|
||
.fui-calendar__right-radius {
|
||
border-top-right-radius: 8rpx;
|
||
border-bottom-right-radius: 8rpx;
|
||
}
|
||
|
||
.fui-calendar__date-val {
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.fui-calendar__date-lunar {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
transform: scale(0.8);
|
||
text-align: center;
|
||
}
|
||
|
||
.fui-calendar__date-descr {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: block;
|
||
/* #endif */
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
transform: scale(0.8);
|
||
text-align: center;
|
||
bottom: 8rpx;
|
||
z-index: 2;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.fui-calendar__swiper {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
/* #endif */
|
||
height: 648rpx;
|
||
}
|
||
|
||
.fui-calendar__diaabled {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.fui-calendar__btn-wrap {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex: 1;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.fui-calendar__btn {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
/* #endif */
|
||
flex: 1;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
}
|
||
|
||
/* #ifdef APP-NVUE */
|
||
.fui-calendar__btn-text {
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
.fui-calendar__btn-active:active {
|
||
background: rgba(0, 0, 0, .2);
|
||
}
|
||
|
||
.fui-calendar__badge {
|
||
position: absolute;
|
||
height: 8px;
|
||
width: 8px;
|
||
/* #ifdef APP-NVUE */
|
||
border-radius: 100px;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
border-radius: 50%;
|
||
z-index: 3;
|
||
/* #endif */
|
||
}
|
||
</style> |