From 64b432916af9c9218ab3f3eca614e26c542142ae Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 07 十一月 2023 15:47:13 +0800
Subject: [PATCH] bug
---
minipro_standard/uni_modules/l-calendar/components/l-calendar/l-calendar.vue | 1662 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 831 insertions(+), 831 deletions(-)
diff --git a/minipro_standard/uni_modules/l-calendar/components/l-calendar/l-calendar.vue b/minipro_standard/uni_modules/l-calendar/components/l-calendar/l-calendar.vue
index cd1ea4a..76709ab 100644
--- a/minipro_standard/uni_modules/l-calendar/components/l-calendar/l-calendar.vue
+++ b/minipro_standard/uni_modules/l-calendar/components/l-calendar/l-calendar.vue
@@ -1,832 +1,832 @@
-<template>
- <view @touchmove.stop.prevent>
- <view class="l-calendar-box" :class="{'calendar-box-show': value}">
- <view class="calendar-top">
- <view>{{title}}</view>
- <view class="close l-icons icon-shanchu" hover-class="l-opacity" :hover-stay-time="150" @tap="hide">
- </view>
- </view>
-
- <view class="date-box">
- <view class=" date-arrowleft l-icons icon-youjiantou" :style="{ color: yearChangeColor }"
- hover-class="l-opacity" :hover-stay-time="150" @tap="changeYear(false)">
- </view>
- <view class=" date-arrowleft l-icons icon-zuojiantou" :style="{ color: monthChangeColor }"
- hover-class="l-opacity" :hover-stay-time="150" @tap="changeMonth(false)"></view>
- <view class="title-datetime">{{ showTitle }}</view>
- <view class=" date-arrowright l-icons icon-youjiantou2" :style="{ color: monthChangeColor }"
- hover-class="l-opacity" :hover-stay-time="150" @tap="changeMonth(true)"></view>
- <view class=" date-arrowright l-icons icon-youjiantou1" :style="{ color: yearChangeColor }"
- hover-class="l-opacity" :hover-stay-time="150" @tap="changeYear(true)"></view>
- </view>
- <view class="date-weekday">
- <view class="date-weekday-item">鏃�</view>
- <view class="date-weekday-item">涓�</view>
- <view class="date-weekday-item">浜�</view>
- <view class="date-weekday-item">涓�</view>
- <view class="date-weekday-item">鍥�</view>
- <view class="date-weekday-item">浜�</view>
- <view class="date-weekday-item">鍏�</view>
- </view>
- <view class="date-content" :style="{ height: dateHeight * 6 + 'px' }">
- <block v-for="(item, index) in weekdayArr" :key="index">
- <view class="date-weekday-item"></view>
- </block>
- <view class="date-weekday-item" :class="{
- 'l-opacity': isDisable(year, month, index + 1),
- 'start-date': (isRange && startDate == `${year}-${month}-${index + 1}`) || !isRange,
- 'end-date': (isRange && endDate == `${year}-${month}-${index + 1}`) || !isRange
- }" :style="{ backgroundColor: getColor(index, 1), height: dateHeight + 'px',padding:0}"
- v-for="(item, index) in daysArr" :key="index" @tap="dateClick(index)">
- <view class="date-content-item" :style="{ color: getColor(index, 2) }">
- <view>{{ index + 1 }}</view>
- <!-- 鍐滃巻 -->
- <view class="custom-desc">
- {{ getText(index, startDate, endDate) }}
- </view>
- </view>
- <view class="date-content-item-desc" :style="{ color: activeColor }"
- v-if="!lunar && isRange && startDate == `${year}-${month}-${index + 1}` && startDate != endDate">
- {{ startText }}
- </view>
- <view class="date-content-item-desc" :style="{ color: activeColor }"
- v-if="!lunar && isRange && endDate == `${year}-${month}-${index + 1}`">{{ endText }}</view>
- </view>
- <view class="bg-mounth">{{ month }}</view>
- </view>
-
- <view class="calendar-text">
- <!-- <view class="calendar-result">
- <text>{{ !isRange ? activeDate : startDate }}</text>
- <text v-if="endDate">鑷硔{ endDate }}</text>
- </view> -->
- <view class="calendar-btn">
- <button :style="{opacity:disabled ? '.5' : '1'}" :size="28" :disabled="disabled"
- @click="confireBtnClick(false)">纭畾
- </button>
- </view>
- </view>
- </view>
-
- <view class="mask" :class="[value ? 'mask-show' : '']" @tap="hide"></view>
- </view>
-</template>
-<script>
- import calendar from './calendar.js';
- export default {
- name: 'lCalendar',
- model: {
- prop: 'value',
- event: 'input'
- },
- props: {
- //鍙屽悜缁戝畾鐨勫�� 鐢ㄤ簬灞曠ず/鍏抽棴鏃ュ巻
- value: {
- type: Boolean,
- default: false
- },
- //鏄惁閫夋嫨鑼冨洿 true鏄� false閫夋嫨鍗曚釜鏃ユ湡
- isRange: {
- type: Boolean,
- default: false
- },
- //鍙垏鎹㈡渶澶у勾浠�
- maxYear: {
- type: Number,
- default: 2100
- },
- //鍙垏鎹㈡渶灏忓勾浠�
- minYear: {
- type: Number,
- default: 1920
- },
- //鏈�灏忓彲閫夋棩鏈� 涓嶅湪鑼冨洿鍐呮棩鏈熺閫�
- minDate: {
- type: String,
- default: '1920-01-01'
- },
- //鏈�澶у彲閫夋棩鏈�
- maxDate: {
- type: String,
- default: '2100-1-1'
- },
- //缁勪欢鏍囬
- title: {
- type: String,
- default: '鏃ユ湡閫夋嫨'
- },
- //鏈堜唤鍒囨崲绠ご棰滆壊
- monthChangeColor: {
- type: String,
- default: '#999'
- },
- //骞翠唤鍒囨崲绠ご棰滆壊
- yearChangeColor: {
- type: String,
- default: '#bfbfbf'
- },
- //榛樿鏃ユ湡瀛椾綋棰滆壊
- color: {
- type: String,
- default: '#333'
- },
-
- //閫変腑鏃ユ湡瀛椾綋棰滆壊
- activeColor: {
- type: String,
- default: '#fff'
- },
- //閫変腑鏃ユ湡鑳屾櫙鑹�
- activeBgColor: {
- type: String,
- default: '#55BBF9'
- },
- //鑼冨洿鍐呮棩鏈熻儗鏅壊
- rangeBgColor: {
- type: String,
- default: 'rgba(85, 187, 249, 0.1)'
- },
- //鑼冨洿鍐呮棩鏈熷瓧浣撻鑹�
- rangeColor: {
- type: String,
- default: '#55BBF9'
- },
-
- //鑼冨洿閫夋嫨鏃剁敓鏁� 寮�濮嬫棩鏈熻嚜瀹氫箟鏂囧瓧
- startText: {
- type: String,
- default: '寮�濮�'
- },
- //鑼冨洿閫夋嫨鏃剁敓鏁� 缁撴潫鏃ユ湡鑷畾涔夋枃瀛�
- endText: {
- type: String,
- default: '缁撴潫'
- },
- //鏄惁鏄剧ず鍐滃巻
- lunar: {
- type: Boolean,
- default: true
- },
- //鍒濆鍖栧紑濮嬮�変腑鏃ユ湡 鏍煎紡锛� 2020-06-06 鎴� 2020/06/06
- initStartDate: {
- type: String,
- default: ''
- },
- //鍒濆鍖栫粨鏉熸棩鏈� 鏍煎紡锛� 2020-06-06 鎴� 2020/06/06
- initEndDate: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- weekday: 1, // 鏄熸湡鍑�,鍊间负1-7
- 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,
- dateHeight: 20
- };
- },
- computed: {
- dataChange() {
- return `${this.type}-${this.minDate}-${this.maxDate}-${this.initStartDate}-${this.initEndDate}`;
- },
- disabled() {
- return this.isRange && (!this.startDate || !this.endDate)
- }
- },
- 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.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;
- },
- getText(index, startDate, endDate) {
- let text = this.lunar ? this.getLunar(this.year, this.month, index + 1) : '';
- if (this.isRange) {
- if (this.lunar) {
- let date = `${this.year}-${this.month}-${index + 1}`;
- if (startDate == date && startDate != endDate) {
- text = this.startText;
- } else if (endDate == date) {
- text = this.endText;
- }
- }
- }
- return text;
- },
- getLunar(year, month, day) {
- let obj = calendar.solar2lunar(year, month, day);
- if (obj.IDayCn == '鍒濅竴') {
- return obj.IMonthCn
- }
- return obj.IDayCn;
- },
- init() {
- this.dateHeight = uni.getSystemInfoSync().windowWidth / 7;
- 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);
- if (this.isDisable(this.year, this.month, this.day)) {
- this.year = this.min.year;
- this.month = this.min.month;
- this.day = this.min.day;
- this.activeDate = `${this.min.year}-${this.min.month}-${this.min.day}`;
- this.max = this.initDate(this.maxDate || this.minDate);
- }
- this.startDate = '';
- this.startYear = 0;
- this.startMonth = 0;
- this.startDay = 0;
- if (this.initStartDate) {
- let start = new Date(this.initStartDate.replace(/\-/g, '/'));
- if (!this.isRange) {
- this.year = start.getFullYear();
- this.month = start.getMonth() + 1;
- this.day = start.getDate();
- this.activeDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
- } else {
- this.startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
- this.startYear = start.getFullYear();
- this.startMonth = start.getMonth() + 1;
- this.startDay = start.getDate();
- this.activeDate = '';
- }
-
- }
- this.endYear = 0;
- this.endMonth = 0;
- this.endDay = 0;
- this.endDate = '';
- if (this.initEndDate && this.isRange) {
- let end = new Date(this.initEndDate.replace(/\-/g, '/'));
- this.endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
- this.endYear = end.getFullYear();
- this.endMonth = end.getMonth() + 1;
- this.endDay = end.getDate();
- this.activeDate = '';
- this.year = end.getFullYear();
- this.month = end.getMonth() + 1;
- this.day = end.getDate();
- }
- this.isStart = true;
- this.changeData();
- },
- //鏃ユ湡澶勭悊
- initDate(date) {
- let dateArr = date.split('-');
- return {
- year: Number(dateArr[0] || 1920),
- month: Number(dateArr[1] || 1),
- day: Number(dateArr[2] || 1)
- };
- },
- isDisable(year, month, day) {
- let bool = 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()) {
- bool = false;
- }
- return bool;
- },
- generateArray(start, end) {
- return Array.from(new Array(end + 1).keys()).slice(start);
- },
- formatNum(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();
- },
- changeMonth(isAdd) {
- if (isAdd) {
- let month = this.month + 1;
- let year = month > 12 ? this.year + 1 : this.year;
- if (year > this.minYear || year < this.maxYear) {
- 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 (year > this.minYear || year < this.maxYear) {
- this.month = month < 1 ? 12 : month;
- this.year = year;
- this.changeData();
- }
- }
- },
- changeYear(isAdd) {
- let year = isAdd ? this.year + 1 : this.year - 1;
- if (year > this.minYear || year < this.maxYear) {
- 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.isRange) {
- this.confireBtnClick(true);
- }
- },
- dateClick: function(day) {
- day += 1;
- if (!this.isDisable(this.year, this.month, day)) {
- this.day = day;
- let date = `${this.year}-${this.month}-${day}`;
- if (!this.isRange) {
- 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;
- }
- }
- }
- },
- hide() {
- this.$emit('input', false)
- },
- getWeekText(date) {
- date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
- let week = date.getDay();
- return '鏄熸湡' + ['鏃�', '涓�', '浜�', '涓�', '鍥�', '浜�', '鍏�'][week];
- },
- confireBtnClick(show) {
- if (!show) {
- this.hide();
- }
- if (!this.isRange) {
- let arr = this.activeDate.split('-');
- let year = +arr[0];
- let month = +arr[1];
- let day = +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;
- }
- let lunar = calendar.solar2lunar(year, month, day);
- this.$emit('change', {
- year: year,
- month: month,
- day: day,
- days: days,
- result: result,
- week: weekText,
- isToday: isToday,
- lunar: lunar
- });
- } 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 startLunar = calendar.solar2lunar(this.startYear, startMonth, startDay);
-
- let endMonth = this.formatNum(this.endMonth);
- let endDay = this.formatNum(this.endDay);
- let endDate = `${this.endYear}-${endMonth}-${endDay}`;
- let endWeek = this.getWeekText(endDate);
- let endLunar = calendar.solar2lunar(this.endYear, endMonth, endDay);
- this.$emit('change', {
- startYear: this.startYear,
- startMonth: this.startMonth,
- startDay: this.startDay,
- startDate: startDate,
- startWeek: startWeek,
- startLunar: startLunar,
- endYear: this.endYear,
- endMonth: this.endMonth,
- endDay: this.endDay,
- endDate: endDate,
- endWeek: endWeek,
- endLunar: endLunar
- });
- }
- }
- }
- };
-</script>
-
-<style lang="scss" scoped>
- @font-face {
- font-family: 'l-icons';
- src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
- font-weight: normal;
- font-style: normal;
- font-display: swap;
- }
-
- .l-icons {
- font-family: 'l-icons';
- font-size: 38rpx;
- color: #333333;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale
- }
-
- .icon-shanchu:before {
- content: "\e6f0";
- }
-
- .icon-youjiantou:before {
- content: "\e600";
- }
-
- .icon-zuojiantou:before {
- content: "\e623";
- }
-
- .icon-youjiantou1:before {
- content: "\e607";
- }
-
- .icon-youjiantou2:before {
- content: "\e61f";
- }
-
- .l-calendar-box {
- width: 100%;
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 9999;
- visibility: hidden;
- transform: translate3d(0, 100%, 0);
- transform-origin: center;
- transition: all 0.3s ease-in-out;
- min-height: 20rpx;
-
- .calendar-top {
- width: 100%;
- height: 80rpx;
- padding: 0 40rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- font-size: 30rpx;
- font-weight: bold;
- background-color: #fff;
- color: #333;
- position: relative;
- border-top-left-radius: 20rpx;
- border-top-right-radius: 20rpx;
- overflow: hidden;
- .close {
- position: absolute;
- right: 30rpx;
- top: 50%;
- transform: translateY(-50%);
- color: #999;
-
- }
- }
-
- .date-box {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 20rpx 0 30rpx;
- background-color: #fff;
- .date-arrowleft {
- margin-right: 32rpx;
- }
-
- .date-arrowright {
- margin-left: 32rpx;
- }
-
- .title-datetime {
- padding: 0 16rpx;
- color: #333;
- font-size: 30rpx;
- line-height: 30rpx;
- font-weight: bold;
- }
- }
-
- .date-weekday {
- width: 100%;
- display: flex;
- align-items: center;
- background-color: #fff;
- font-size: 24rpx;
- line-height: 24rpx;
- color: #555;
- box-shadow: 0 15rpx 20rpx -15rpx #efefef;
- position: relative;
- z-index: 2;
- .date-weekday-item {
- width: 14.2857%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 12rpx 0;
- overflow: hidden;
- position: relative;
- z-index: 2;
- }
- }
- .date-content {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- padding: 12rpx 0;
- box-sizing: border-box;
- background-color: #fff;
- position: relative;
- align-content: flex-start;
- .date-weekday-item {
- width: 14.2857%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 12rpx 0;
- overflow: hidden;
- position: relative;
- z-index: 2;
-
- .date-content-item {
- width: 80rpx;
- height: 80rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- font-size: 32rpx;
- line-height: 32rpx;
- position: relative;
- border-radius: 50%;
- background-color: transparent;
- .custom-desc {
- width: 100%;
- font-size: 24rpx;
- line-height: 24rpx;
- transform: scale(0.8);
- transform-origin: center center;
- text-align: center;
- }
-
- }
- .date-content-item-desc {
- 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;
- }
- }
- .start-date {
- border-top-left-radius: 8rpx;
- border-bottom-left-radius: 8rpx;
- }
-
- .end-date {
- border-top-right-radius: 8rpx;
- border-bottom-right-radius: 8rpx;
- }
-
- .bg-mounth {
- position: absolute;
- font-size: 260rpx;
- line-height: 260rpx;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- color: #f5f5f7;
- z-index: 1;
- }
- }
-
-
- .calendar-text {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- background-color: #fff;
- padding: 0 42rpx env(safe-area-inset-bottom);
- box-sizing: border-box;
- font-size: 24rpx;
- color: #666;
- .calendar-result {
- height: 48rpx;
- transform: scale(0.9);
- transform-origin: center 100%;
- }
-
- .calendar-btn {
- width: 100%;
-
- button {
- background-color: #305ED5;
- color: #fff;
- height: 72rpx;
- line-height: 72rpx;
- font-size: 32rpx
- }
- }
- }
-
-
-
- }
- .mask {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.6);
- z-index: 9996;
- transition: all 0.3s ease-in-out;
- opacity: 0;
- visibility: hidden;
- }
-
- .mask-show {
- opacity: 1;
- visibility: visible;
- }
-
- /* @font-face {
- font-family: 'tuiDateFont';
- src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=) format('woff');
- font-weight: normal;
- font-style: normal;
- }
-
- .tui-iconfont {
- font-family: 'tuiDateFont' !important;
- font-size: 36rpx;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- .tui-font-close:before {
- content: '\e608';
- }
-
- .tui-font-check:before {
- content: '\e6e1';
- }
-
- .date-arrowright:before {
- content: '\e600';
- }
-
- .date-arrowleft:before {
- content: '\e601';
- } */
-
-
- // .calendar-radius {
- // border-top-left-radius: 20rpx;
- // border-top-right-radius: 20rpx;
- // overflow: hidden;
- // }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- .tui-btn-calendar {
- padding: 16rpx;
- box-sizing: border-box;
- text-align: center;
- text-decoration: none;
- }
-
- .l-opacity {
- opacity: 0.5;
- }
-
-
-
- .calendar-box-show {
- transform: translate3d(0, 0, 0);
- visibility: visible;
- }
-
-
-
-
-
-
-
-
-
- // .tui-lunar-unshow {
- // position: absolute;
- // left: 0;
- // bottom: 8rpx;
- // z-index: 2;
- // }
-
-
-
-
-
-
+<template>
+ <view @touchmove.stop.prevent>
+ <view class="l-calendar-box" :class="{'calendar-box-show': value}">
+ <view class="calendar-top">
+ <view>{{title}}</view>
+ <view class="close l-icons icon-shanchu" hover-class="l-opacity" :hover-stay-time="150" @tap="hide">
+ </view>
+ </view>
+
+ <view class="date-box">
+ <view class=" date-arrowleft l-icons icon-youjiantou" :style="{ color: yearChangeColor }"
+ hover-class="l-opacity" :hover-stay-time="150" @tap="changeYear(false)">
+ </view>
+ <view class=" date-arrowleft l-icons icon-zuojiantou" :style="{ color: monthChangeColor }"
+ hover-class="l-opacity" :hover-stay-time="150" @tap="changeMonth(false)"></view>
+ <view class="title-datetime">{{ showTitle }}</view>
+ <view class=" date-arrowright l-icons icon-youjiantou2" :style="{ color: monthChangeColor }"
+ hover-class="l-opacity" :hover-stay-time="150" @tap="changeMonth(true)"></view>
+ <view class=" date-arrowright l-icons icon-youjiantou1" :style="{ color: yearChangeColor }"
+ hover-class="l-opacity" :hover-stay-time="150" @tap="changeYear(true)"></view>
+ </view>
+ <view class="date-weekday">
+ <view class="date-weekday-item">鏃�</view>
+ <view class="date-weekday-item">涓�</view>
+ <view class="date-weekday-item">浜�</view>
+ <view class="date-weekday-item">涓�</view>
+ <view class="date-weekday-item">鍥�</view>
+ <view class="date-weekday-item">浜�</view>
+ <view class="date-weekday-item">鍏�</view>
+ </view>
+ <view class="date-content" :style="{ height: dateHeight * 6 + 'px' }">
+ <block v-for="(item, index) in weekdayArr" :key="index">
+ <view class="date-weekday-item"></view>
+ </block>
+ <view class="date-weekday-item" :class="{
+ 'l-opacity': isDisable(year, month, index + 1),
+ 'start-date': (isRange && startDate == `${year}-${month}-${index + 1}`) || !isRange,
+ 'end-date': (isRange && endDate == `${year}-${month}-${index + 1}`) || !isRange
+ }" :style="{ backgroundColor: getColor(index, 1), height: dateHeight + 'px',padding:0}"
+ v-for="(item, index) in daysArr" :key="index" @tap="dateClick(index)">
+ <view class="date-content-item" :style="{ color: getColor(index, 2) }">
+ <view>{{ index + 1 }}</view>
+ <!-- 鍐滃巻 -->
+ <view class="custom-desc">
+ {{ getText(index, startDate, endDate) }}
+ </view>
+ </view>
+ <view class="date-content-item-desc" :style="{ color: activeColor }"
+ v-if="!lunar && isRange && startDate == `${year}-${month}-${index + 1}` && startDate != endDate">
+ {{ startText }}
+ </view>
+ <view class="date-content-item-desc" :style="{ color: activeColor }"
+ v-if="!lunar && isRange && endDate == `${year}-${month}-${index + 1}`">{{ endText }}</view>
+ </view>
+ <view class="bg-mounth">{{ month }}</view>
+ </view>
+
+ <view class="calendar-text">
+ <!-- <view class="calendar-result">
+ <text>{{ !isRange ? activeDate : startDate }}</text>
+ <text v-if="endDate">鑷硔{ endDate }}</text>
+ </view> -->
+ <view class="calendar-btn">
+ <button :style="{opacity:disabled ? '.5' : '1'}" :size="28" :disabled="disabled"
+ @click="confireBtnClick(false)">纭畾
+ </button>
+ </view>
+ </view>
+ </view>
+
+ <view class="mask" :class="[value ? 'mask-show' : '']" @tap="hide"></view>
+ </view>
+</template>
+<script>
+ import calendar from './calendar.js';
+ export default {
+ name: 'lCalendar',
+ model: {
+ prop: 'value',
+ event: 'input'
+ },
+ props: {
+ //鍙屽悜缁戝畾鐨勫�� 鐢ㄤ簬灞曠ず/鍏抽棴鏃ュ巻
+ value: {
+ type: Boolean,
+ default: false
+ },
+ //鏄惁閫夋嫨鑼冨洿 true鏄� false閫夋嫨鍗曚釜鏃ユ湡
+ isRange: {
+ type: Boolean,
+ default: false
+ },
+ //鍙垏鎹㈡渶澶у勾浠�
+ maxYear: {
+ type: Number,
+ default: 2100
+ },
+ //鍙垏鎹㈡渶灏忓勾浠�
+ minYear: {
+ type: Number,
+ default: 1920
+ },
+ //鏈�灏忓彲閫夋棩鏈� 涓嶅湪鑼冨洿鍐呮棩鏈熺閫�
+ minDate: {
+ type: String,
+ default: '1920-01-01'
+ },
+ //鏈�澶у彲閫夋棩鏈�
+ maxDate: {
+ type: String,
+ default: '2100-1-1'
+ },
+ //缁勪欢鏍囬
+ title: {
+ type: String,
+ default: '鏃ユ湡閫夋嫨'
+ },
+ //鏈堜唤鍒囨崲绠ご棰滆壊
+ monthChangeColor: {
+ type: String,
+ default: '#999'
+ },
+ //骞翠唤鍒囨崲绠ご棰滆壊
+ yearChangeColor: {
+ type: String,
+ default: '#bfbfbf'
+ },
+ //榛樿鏃ユ湡瀛椾綋棰滆壊
+ color: {
+ type: String,
+ default: '#333'
+ },
+
+ //閫変腑鏃ユ湡瀛椾綋棰滆壊
+ activeColor: {
+ type: String,
+ default: '#fff'
+ },
+ //閫変腑鏃ユ湡鑳屾櫙鑹�
+ activeBgColor: {
+ type: String,
+ default: '#55BBF9'
+ },
+ //鑼冨洿鍐呮棩鏈熻儗鏅壊
+ rangeBgColor: {
+ type: String,
+ default: 'rgba(85, 187, 249, 0.1)'
+ },
+ //鑼冨洿鍐呮棩鏈熷瓧浣撻鑹�
+ rangeColor: {
+ type: String,
+ default: '#55BBF9'
+ },
+
+ //鑼冨洿閫夋嫨鏃剁敓鏁� 寮�濮嬫棩鏈熻嚜瀹氫箟鏂囧瓧
+ startText: {
+ type: String,
+ default: '寮�濮�'
+ },
+ //鑼冨洿閫夋嫨鏃剁敓鏁� 缁撴潫鏃ユ湡鑷畾涔夋枃瀛�
+ endText: {
+ type: String,
+ default: '缁撴潫'
+ },
+ //鏄惁鏄剧ず鍐滃巻
+ lunar: {
+ type: Boolean,
+ default: true
+ },
+ //鍒濆鍖栧紑濮嬮�変腑鏃ユ湡 鏍煎紡锛� 2020-06-06 鎴� 2020/06/06
+ initStartDate: {
+ type: String,
+ default: ''
+ },
+ //鍒濆鍖栫粨鏉熸棩鏈� 鏍煎紡锛� 2020-06-06 鎴� 2020/06/06
+ initEndDate: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ weekday: 1, // 鏄熸湡鍑�,鍊间负1-7
+ 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,
+ dateHeight: 20
+ };
+ },
+ computed: {
+ dataChange() {
+ return `${this.type}-${this.minDate}-${this.maxDate}-${this.initStartDate}-${this.initEndDate}`;
+ },
+ disabled() {
+ return this.isRange && (!this.startDate || !this.endDate)
+ }
+ },
+ 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.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;
+ },
+ getText(index, startDate, endDate) {
+ let text = this.lunar ? this.getLunar(this.year, this.month, index + 1) : '';
+ if (this.isRange) {
+ if (this.lunar) {
+ let date = `${this.year}-${this.month}-${index + 1}`;
+ if (startDate == date && startDate != endDate) {
+ text = this.startText;
+ } else if (endDate == date) {
+ text = this.endText;
+ }
+ }
+ }
+ return text;
+ },
+ getLunar(year, month, day) {
+ let obj = calendar.solar2lunar(year, month, day);
+ if (obj.IDayCn == '鍒濅竴') {
+ return obj.IMonthCn
+ }
+ return obj.IDayCn;
+ },
+ init() {
+ this.dateHeight = uni.getSystemInfoSync().windowWidth / 7;
+ 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);
+ if (this.isDisable(this.year, this.month, this.day)) {
+ this.year = this.min.year;
+ this.month = this.min.month;
+ this.day = this.min.day;
+ this.activeDate = `${this.min.year}-${this.min.month}-${this.min.day}`;
+ this.max = this.initDate(this.maxDate || this.minDate);
+ }
+ this.startDate = '';
+ this.startYear = 0;
+ this.startMonth = 0;
+ this.startDay = 0;
+ if (this.initStartDate) {
+ let start = new Date(this.initStartDate.replace(/\-/g, '/'));
+ if (!this.isRange) {
+ this.year = start.getFullYear();
+ this.month = start.getMonth() + 1;
+ this.day = start.getDate();
+ this.activeDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
+ } else {
+ this.startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
+ this.startYear = start.getFullYear();
+ this.startMonth = start.getMonth() + 1;
+ this.startDay = start.getDate();
+ this.activeDate = '';
+ }
+
+ }
+ this.endYear = 0;
+ this.endMonth = 0;
+ this.endDay = 0;
+ this.endDate = '';
+ if (this.initEndDate && this.isRange) {
+ let end = new Date(this.initEndDate.replace(/\-/g, '/'));
+ this.endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
+ this.endYear = end.getFullYear();
+ this.endMonth = end.getMonth() + 1;
+ this.endDay = end.getDate();
+ this.activeDate = '';
+ this.year = end.getFullYear();
+ this.month = end.getMonth() + 1;
+ this.day = end.getDate();
+ }
+ this.isStart = true;
+ this.changeData();
+ },
+ //鏃ユ湡澶勭悊
+ initDate(date) {
+ let dateArr = date.split('-');
+ return {
+ year: Number(dateArr[0] || 1920),
+ month: Number(dateArr[1] || 1),
+ day: Number(dateArr[2] || 1)
+ };
+ },
+ isDisable(year, month, day) {
+ let bool = 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()) {
+ bool = false;
+ }
+ return bool;
+ },
+ generateArray(start, end) {
+ return Array.from(new Array(end + 1).keys()).slice(start);
+ },
+ formatNum(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();
+ },
+ changeMonth(isAdd) {
+ if (isAdd) {
+ let month = this.month + 1;
+ let year = month > 12 ? this.year + 1 : this.year;
+ if (year > this.minYear || year < this.maxYear) {
+ 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 (year > this.minYear || year < this.maxYear) {
+ this.month = month < 1 ? 12 : month;
+ this.year = year;
+ this.changeData();
+ }
+ }
+ },
+ changeYear(isAdd) {
+ let year = isAdd ? this.year + 1 : this.year - 1;
+ if (year > this.minYear || year < this.maxYear) {
+ 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.isRange) {
+ this.confireBtnClick(true);
+ }
+ },
+ dateClick: function(day) {
+ day += 1;
+ if (!this.isDisable(this.year, this.month, day)) {
+ this.day = day;
+ let date = `${this.year}-${this.month}-${day}`;
+ if (!this.isRange) {
+ 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;
+ }
+ }
+ }
+ },
+ hide() {
+ this.$emit('input', false)
+ },
+ getWeekText(date) {
+ date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
+ let week = date.getDay();
+ return '鏄熸湡' + ['鏃�', '涓�', '浜�', '涓�', '鍥�', '浜�', '鍏�'][week];
+ },
+ confireBtnClick(show) {
+ if (!show) {
+ this.hide();
+ }
+ if (!this.isRange) {
+ let arr = this.activeDate.split('-');
+ let year = +arr[0];
+ let month = +arr[1];
+ let day = +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;
+ }
+ let lunar = calendar.solar2lunar(year, month, day);
+ this.$emit('change', {
+ year: year,
+ month: month,
+ day: day,
+ days: days,
+ result: result,
+ week: weekText,
+ isToday: isToday,
+ lunar: lunar
+ });
+ } 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 startLunar = calendar.solar2lunar(this.startYear, startMonth, startDay);
+
+ let endMonth = this.formatNum(this.endMonth);
+ let endDay = this.formatNum(this.endDay);
+ let endDate = `${this.endYear}-${endMonth}-${endDay}`;
+ let endWeek = this.getWeekText(endDate);
+ let endLunar = calendar.solar2lunar(this.endYear, endMonth, endDay);
+ this.$emit('change', {
+ startYear: this.startYear,
+ startMonth: this.startMonth,
+ startDay: this.startDay,
+ startDate: startDate,
+ startWeek: startWeek,
+ startLunar: startLunar,
+ endYear: this.endYear,
+ endMonth: this.endMonth,
+ endDay: this.endDay,
+ endDate: endDate,
+ endWeek: endWeek,
+ endLunar: endLunar
+ });
+ }
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @font-face {
+ font-family: 'l-icons';
+ src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+ }
+
+ .l-icons {
+ font-family: 'l-icons';
+ font-size: 38rpx;
+ color: #333333;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale
+ }
+
+ .icon-shanchu:before {
+ content: "\e6f0";
+ }
+
+ .icon-youjiantou:before {
+ content: "\e600";
+ }
+
+ .icon-zuojiantou:before {
+ content: "\e623";
+ }
+
+ .icon-youjiantou1:before {
+ content: "\e607";
+ }
+
+ .icon-youjiantou2:before {
+ content: "\e61f";
+ }
+
+ .l-calendar-box {
+ width: 100%;
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99999;
+ visibility: hidden;
+ transform: translate3d(0, 100%, 0);
+ transform-origin: center;
+ transition: all 0.3s ease-in-out;
+ min-height: 20rpx;
+
+ .calendar-top {
+ width: 100%;
+ height: 80rpx;
+ padding: 0 40rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ font-size: 30rpx;
+ font-weight: bold;
+ background-color: #fff;
+ color: #333;
+ position: relative;
+ border-top-left-radius: 20rpx;
+ border-top-right-radius: 20rpx;
+ overflow: hidden;
+ .close {
+ position: absolute;
+ right: 30rpx;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #999;
+
+ }
+ }
+
+ .date-box {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20rpx 0 30rpx;
+ background-color: #fff;
+ .date-arrowleft {
+ margin-right: 32rpx;
+ }
+
+ .date-arrowright {
+ margin-left: 32rpx;
+ }
+
+ .title-datetime {
+ padding: 0 16rpx;
+ color: #333;
+ font-size: 30rpx;
+ line-height: 30rpx;
+ font-weight: bold;
+ }
+ }
+
+ .date-weekday {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ background-color: #fff;
+ font-size: 24rpx;
+ line-height: 24rpx;
+ color: #555;
+ box-shadow: 0 15rpx 20rpx -15rpx #efefef;
+ position: relative;
+ z-index: 2;
+ .date-weekday-item {
+ width: 14.2857%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12rpx 0;
+ overflow: hidden;
+ position: relative;
+ z-index: 2;
+ }
+ }
+ .date-content {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 12rpx 0;
+ box-sizing: border-box;
+ background-color: #fff;
+ position: relative;
+ align-content: flex-start;
+ .date-weekday-item {
+ width: 14.2857%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12rpx 0;
+ overflow: hidden;
+ position: relative;
+ z-index: 2;
+
+ .date-content-item {
+ width: 80rpx;
+ height: 80rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font-size: 32rpx;
+ line-height: 32rpx;
+ position: relative;
+ border-radius: 50%;
+ background-color: transparent;
+ .custom-desc {
+ width: 100%;
+ font-size: 24rpx;
+ line-height: 24rpx;
+ transform: scale(0.8);
+ transform-origin: center center;
+ text-align: center;
+ }
+
+ }
+ .date-content-item-desc {
+ 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;
+ }
+ }
+ .start-date {
+ border-top-left-radius: 8rpx;
+ border-bottom-left-radius: 8rpx;
+ }
+
+ .end-date {
+ border-top-right-radius: 8rpx;
+ border-bottom-right-radius: 8rpx;
+ }
+
+ .bg-mounth {
+ position: absolute;
+ font-size: 260rpx;
+ line-height: 260rpx;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: #f5f5f7;
+ z-index: 1;
+ }
+ }
+
+
+ .calendar-text {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ background-color: #fff;
+ padding: 0 42rpx env(safe-area-inset-bottom);
+ box-sizing: border-box;
+ font-size: 24rpx;
+ color: #666;
+ .calendar-result {
+ height: 48rpx;
+ transform: scale(0.9);
+ transform-origin: center 100%;
+ }
+
+ .calendar-btn {
+ width: 100%;
+
+ button {
+ background-color: #305ED5;
+ color: #fff;
+ height: 72rpx;
+ line-height: 72rpx;
+ font-size: 32rpx
+ }
+ }
+ }
+
+
+
+ }
+ .mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
+ z-index: 9996;
+ transition: all 0.3s ease-in-out;
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ .mask-show {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ /* @font-face {
+ font-family: 'tuiDateFont';
+ src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=) format('woff');
+ font-weight: normal;
+ font-style: normal;
+ }
+
+ .tui-iconfont {
+ font-family: 'tuiDateFont' !important;
+ font-size: 36rpx;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ .tui-font-close:before {
+ content: '\e608';
+ }
+
+ .tui-font-check:before {
+ content: '\e6e1';
+ }
+
+ .date-arrowright:before {
+ content: '\e600';
+ }
+
+ .date-arrowleft:before {
+ content: '\e601';
+ } */
+
+
+ // .calendar-radius {
+ // border-top-left-radius: 20rpx;
+ // border-top-right-radius: 20rpx;
+ // overflow: hidden;
+ // }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .tui-btn-calendar {
+ padding: 16rpx;
+ box-sizing: border-box;
+ text-align: center;
+ text-decoration: none;
+ }
+
+ .l-opacity {
+ opacity: 0.5;
+ }
+
+
+
+ .calendar-box-show {
+ transform: translate3d(0, 0, 0);
+ visibility: visible;
+ }
+
+
+
+
+
+
+
+
+
+ // .tui-lunar-unshow {
+ // position: absolute;
+ // left: 0;
+ // bottom: 8rpx;
+ // z-index: 2;
+ // }
+
+
+
+
+
+
</style>
--
Gitblit v1.9.3