1244 lines
43 KiB
Vue
1244 lines
43 KiB
Vue
|
<template>
|
|||
|
|
<u-popup
|
|||
|
|
v-model="popupValue"
|
|||
|
|
length="auto"
|
|||
|
|
:maskCloseAble="maskCloseAble"
|
|||
|
|
:mode="props.isPage ? 'inline' : 'bottom'"
|
|||
|
|
:popup="false"
|
|||
|
|
:safeAreaInsetBottom="safeAreaInsetBottom"
|
|||
|
|
:z-index="uZIndex"
|
|||
|
|
:border-radius="borderRadius"
|
|||
|
|
:closeable="closeable"
|
|||
|
|
@close="close"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="u-calendar"
|
|||
|
|
:class="[props.customClass, { 'u-calendar--page': props.isPage }]"
|
|||
|
|
:style="$u.toStyle(customStyle)"
|
|||
|
|
>
|
|||
|
|
<view class="u-calendar__header" v-if="!props.isPage">
|
|||
|
|
<view class="u-calendar__header__text" v-if="!slots.tooltip">
|
|||
|
|
{{ getToolTip }}
|
|||
|
|
</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}-${formatNum(month)}-${formatNum(index + 1)}`) ||
|
|||
|
|
mode == 'date',
|
|||
|
|
'u-calendar__content--end-date':
|
|||
|
|
(mode == 'range' && endDate == `${year}-${formatNum(month)}-${formatNum(index + 1)}`) ||
|
|||
|
|
mode == 'date',
|
|||
|
|
'u-calendar__content--checked': isCheckedDate(index + 1),
|
|||
|
|
'u-calendar__content--today-checked': isTodayChecked(index + 1),
|
|||
|
|
'u-calendar__content--checkin-mode': props.checkinMode
|
|||
|
|
}"
|
|||
|
|
:style="{
|
|||
|
|
backgroundColor:
|
|||
|
|
!props.checkinMode && props.checkedDates.length === 0 && !props.todayChecked
|
|||
|
|
? getColor(index, 1)
|
|||
|
|
: ''
|
|||
|
|
}"
|
|||
|
|
v-for="(item, index) in daysArr"
|
|||
|
|
:key="index"
|
|||
|
|
@tap="dateClick(index)"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="u-calendar__content__item__inner"
|
|||
|
|
:class="{ 'u-calendar__content__item__inner--today-checked': isTodayChecked(index + 1) }"
|
|||
|
|
:style="{
|
|||
|
|
color: getCheckinTextColor(index + 1) || getColor(index, 2),
|
|||
|
|
backgroundColor: getCheckinColor(index + 1)
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<!-- 今日已打卡时显示对勾，否则显示日期 -->
|
|||
|
|
<view v-if="isTodayChecked(index + 1)" class="u-calendar__content__item__checkmark">
|
|||
|
|
<u-icon name="checkmark" size="36" :color="props.checkedColor"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<template v-else>
|
|||
|
|
<!-- 自定义日期内容插槽 - 优先级最高 -->
|
|||
|
|
<template v-if="props.useDateSlot">
|
|||
|
|
<view class="u-calendar__content__item__day">{{ index + 1 }}</view>
|
|||
|
|
<view
|
|||
|
|
class="u-calendar__content__item__lunar"
|
|||
|
|
:style="{ color: getSlotColor(index + 1) }"
|
|||
|
|
>
|
|||
|
|
<slot name="date" :date="getDateInfo(index + 1)"></slot>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<!-- 日期数字右上角标记：休/班 -->
|
|||
|
|
<view
|
|||
|
|
v-if="isHoliday(index + 1)"
|
|||
|
|
class="u-calendar__content__item__mark u-calendar__content__item__mark--holiday"
|
|||
|
|
:style="{ color: getHolidayWorkdayColor(index + 1, props.holidayColor) }"
|
|||
|
|
>
|
|||
|
|
{{ t('uCalendar.holiday') }}
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-else-if="isWorkday(index + 1)"
|
|||
|
|
class="u-calendar__content__item__mark u-calendar__content__item__mark--workday"
|
|||
|
|
:style="{ color: getHolidayWorkdayColor(index + 1, props.workdayColor) }"
|
|||
|
|
>
|
|||
|
|
{{ t('uCalendar.workday') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="u-calendar__content__item__day">{{ index + 1 }}</view>
|
|||
|
|
<!-- 范围选择开始日期显示"开始" -->
|
|||
|
|
<view
|
|||
|
|
v-if="
|
|||
|
|
mode == 'range' &&
|
|||
|
|
startDate == `${year}-${formatNum(month)}-${formatNum(index + 1)}` &&
|
|||
|
|
startDate != endDate
|
|||
|
|
"
|
|||
|
|
class="u-calendar__content__item__lunar"
|
|||
|
|
:style="{ color: activeColor }"
|
|||
|
|
>
|
|||
|
|
{{ getStartText }}
|
|||
|
|
</view>
|
|||
|
|
<!-- 范围选择结束日期显示"结束" -->
|
|||
|
|
<view
|
|||
|
|
v-else-if="
|
|||
|
|
mode == 'range' &&
|
|||
|
|
endDate == `${year}-${formatNum(month)}-${formatNum(index + 1)}`
|
|||
|
|
"
|
|||
|
|
class="u-calendar__content__item__lunar"
|
|||
|
|
:style="{ color: activeColor }"
|
|||
|
|
>
|
|||
|
|
{{ getEndText }}
|
|||
|
|
</view>
|
|||
|
|
<!-- 节日名称 -->
|
|||
|
|
<view
|
|||
|
|
v-else-if="getFestival(index + 1)"
|
|||
|
|
class="u-calendar__content__item__lunar u-calendar__content__item__festival"
|
|||
|
|
:style="{ color: getHolidayWorkdayColor(index + 1, props.festivalColor) }"
|
|||
|
|
>
|
|||
|
|
{{ getFestival(index + 1) }}
|
|||
|
|
</view>
|
|||
|
|
<!-- 农历 -->
|
|||
|
|
<view
|
|||
|
|
v-else-if="props.showLunar"
|
|||
|
|
class="u-calendar__content__item__lunar"
|
|||
|
|
:style="{ color: getCheckinLunarColor(index + 1) || getColor(index, 2) }"
|
|||
|
|
>
|
|||
|
|
{{
|
|||
|
|
lunarArr[index]?.dayCn === '初一'
|
|||
|
|
? lunarArr[index].monthCn
|
|||
|
|
: (lunarArr[index]?.dayCn ?? '')
|
|||
|
|
}}
|
|||
|
|
</view>
|
|||
|
|
<!-- 占位元素：当有节日/农历数据时保持高度一致 -->
|
|||
|
|
<view
|
|||
|
|
v-else-if="props.showFestival"
|
|||
|
|
class="u-calendar__content__item__lunar u-calendar__content__item__placeholder"
|
|||
|
|
></view>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-calendar__content__bg-month">{{ month }}</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 页面模式下不显示确定按钮，选择完成自动触发change事件 -->
|
|||
|
|
<view class="u-calendar__bottom" v-if="!props.isPage">
|
|||
|
|
<view class="u-calendar__bottom__choose">
|
|||
|
|
<text>{{ mode == 'date' ? activeDate : startDate }}</text>
|
|||
|
|
<text v-if="endDate">{{ t('uCalendar.to') }}{{ endDate }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-calendar__bottom__btn">
|
|||
|
|
<u-button
|
|||
|
|
:type="btnType"
|
|||
|
|
:disabled="btnDisable"
|
|||
|
|
shape="circle"
|
|||
|
|
size="default"
|
|||
|
|
@click="btnFix(false)"
|
|||
|
|
>
|
|||
|
|
{{ t('uCalendar.confirmText') }}
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-calendar',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, watch, onMounted, useSlots } from 'vue';
|
|||
|
|
import { $u, useLocale } from '../..';
|
|||
|
|
import { CalendarProps, type CalendarEmits } from './types';
|
|||
|
|
import Calendar from '../../libs/util/calendar';
|
|||
|
|
import uButton from '../u-button/u-button.vue';
|
|||
|
|
import uIcon from '../u-icon/u-icon.vue';
|
|||
|
|
import uPopup from '../u-popup/u-popup.vue';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* calendar 日历
|
|||
|
|
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
|
|||
|
|
* @tutorial https://uviewpro.cn/zh/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 月份切换按钮箭头颜色(默认var(--u-content-color))
|
|||
|
|
* @property {String} year-arrow-color 年份切换按钮箭头颜色(默认var(--u-tips-color))
|
|||
|
|
* @property {String} color 日期字体的默认颜色(默认var(--u-main-color))
|
|||
|
|
* @property {String} active-bg-color 起始/结束日期按钮的背景色(默认主题色primary)
|
|||
|
|
* @property {String Number} z-index 弹出时的z-index值(默认10075)
|
|||
|
|
* @property {String} active-color 起始/结束日期按钮的字体颜色(默认var(--u-white-color))
|
|||
|
|
* @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
|
|||
|
|
* @property {String} range-color 选择范围内字体颜色(默认主题色primary)
|
|||
|
|
* @property {String} start-text 起始日期底部的提示文字(默认 '开始')
|
|||
|
|
* @property {String} end-text 结束日期底部的提示文字(默认 '结束')
|
|||
|
|
* @property {String} btn-type 底部确定按钮的主题(默认 'primary')
|
|||
|
|
* @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
|
|||
|
|
* @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
|
|||
|
|
* @property {Boolean} is-page 是否在页面中直接显示，不使用弹窗(默认false)
|
|||
|
|
* @property {String} default-date 默认选中的日期，mode=date时生效，格式：2024-01-01
|
|||
|
|
* @property {String} start-date 默认选中的开始日期，mode=range时生效，格式：2024-01-01
|
|||
|
|
* @property {String} end-date 默认选中的结束日期，mode=range时生效，格式：2024-01-01
|
|||
|
|
* @property {Boolean} readonly 是否只读，只读模式下禁止点击选择日期(默认false)
|
|||
|
|
* @example <u-calendar v-model="show" :mode="mode"></u-calendar>
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const props = defineProps(CalendarProps);
|
|||
|
|
const emit = defineEmits<CalendarEmits>();
|
|||
|
|
const slots = useSlots();
|
|||
|
|
|
|||
|
|
const { t } = useLocale();
|
|||
|
|
|
|||
|
|
// 组件内部状态
|
|||
|
|
// 星期几,值为1-7
|
|||
|
|
const weekday = ref(1);
|
|||
|
|
const weekdayArr = ref<number[]>([]);
|
|||
|
|
const days = ref(0);
|
|||
|
|
const daysArr = ref<number[]>([]);
|
|||
|
|
const lunarArr = ref<any[]>([]);
|
|||
|
|
const year = ref(2020);
|
|||
|
|
const month = ref(0);
|
|||
|
|
// 当前月有多少天
|
|||
|
|
const day = ref(0);
|
|||
|
|
const startYear = ref(0);
|
|||
|
|
const startMonth = ref(0);
|
|||
|
|
const startDay = ref(0);
|
|||
|
|
const endYear = ref(0);
|
|||
|
|
const endMonth = ref(0);
|
|||
|
|
const endDay = ref(0);
|
|||
|
|
const today = ref('');
|
|||
|
|
const activeDate = ref('');
|
|||
|
|
const startDate = ref('');
|
|||
|
|
const endDate = ref('');
|
|||
|
|
const isStart = ref(true);
|
|||
|
|
const min = ref<{ year: number; month: number; day: number } | null>(null);
|
|||
|
|
const max = ref<{ year: number; month: number; day: number } | null>(null);
|
|||
|
|
const weekDayZh = ref([
|
|||
|
|
t('uCalendar.sun'),
|
|||
|
|
t('uCalendar.mon'),
|
|||
|
|
t('uCalendar.tue'),
|
|||
|
|
t('uCalendar.wed'),
|
|||
|
|
t('uCalendar.thu'),
|
|||
|
|
t('uCalendar.fri'),
|
|||
|
|
t('uCalendar.sat')
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 内置中国传统节日（公历日期，格式：MM-DD）
|
|||
|
|
const builtInFestivals: Record<string, string> = {
|
|||
|
|
'01-01': '元旦',
|
|||
|
|
'02-14': '情人节',
|
|||
|
|
'03-08': '妇女节',
|
|||
|
|
'03-12': '植树节',
|
|||
|
|
'04-01': '愚人节',
|
|||
|
|
'05-01': '劳动节',
|
|||
|
|
'05-04': '青年节',
|
|||
|
|
'06-01': '儿童节',
|
|||
|
|
'07-01': '建党节',
|
|||
|
|
'08-01': '建军节',
|
|||
|
|
'09-10': '教师节',
|
|||
|
|
'10-01': '国庆节',
|
|||
|
|
'11-11': '光棍节',
|
|||
|
|
'12-25': '圣诞节'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const dataChange = computed(() => `${props.mode}-${props.minDate}-${props.maxDate}`);
|
|||
|
|
const lunarChange = computed(() => props.showLunar);
|
|||
|
|
const defaultDateChange = computed(
|
|||
|
|
() => `${props.defaultDate}-${props.startDate}-${props.endDate}-${props.defaultSelectToday}`
|
|||
|
|
);
|
|||
|
|
// 如果用户有传递z-index值，优先使用
|
|||
|
|
const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
|
|||
|
|
const popupValue = computed({
|
|||
|
|
get: () => props.modelValue,
|
|||
|
|
set: (val: boolean) => emit('update:modelValue', val)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const btnDisable = computed(() => {
|
|||
|
|
let disable = false;
|
|||
|
|
if (props.mode == 'range') {
|
|||
|
|
if (!startDate.value || !endDate.value) {
|
|||
|
|
disable = true;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (!activeDate.value) {
|
|||
|
|
disable = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return disable;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 国际化计算属性
|
|||
|
|
const getStartText = computed(() => props.startText || t('uCalendar.startText'));
|
|||
|
|
const getEndText = computed(() => props.endText || t('uCalendar.endText'));
|
|||
|
|
const getToolTip = computed(() => props.toolTip || t('uCalendar.toolTip'));
|
|||
|
|
const showTitle = computed(() => `${year.value}${t('uCalendar.year')}${month.value}${t('uCalendar.month')}`);
|
|||
|
|
|
|||
|
|
watch([dataChange, lunarChange], () => {
|
|||
|
|
init();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(defaultDateChange, () => {
|
|||
|
|
init();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
init();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取日期颜色
|
|||
|
|
* @param index
|
|||
|
|
* @param type 1 背景色 2 字体色
|
|||
|
|
*/
|
|||
|
|
function getColor(index: number, type: number) {
|
|||
|
|
let color = type == 1 ? '' : props.color;
|
|||
|
|
let dayNum = index + 1;
|
|||
|
|
let date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
|
|||
|
|
let start = startDate.value.replace(/\-/g, '/');
|
|||
|
|
let end = endDate.value.replace(/\-/g, '/');
|
|||
|
|
if ((props.isActiveCurrent && activeDate.value == date) || startDate.value == date || endDate.value == date) {
|
|||
|
|
color = type == 1 ? props.activeBgColor : props.activeColor;
|
|||
|
|
} else if (endDate.value && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
|
|||
|
|
color = type == 1 ? props.rangeBgColor : props.rangeColor;
|
|||
|
|
}
|
|||
|
|
return color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断日期是否已打卡
|
|||
|
|
*/
|
|||
|
|
function isCheckedDate(dayNum: number) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
return props.checkedDates.includes(date);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断是否是今日且已打卡
|
|||
|
|
* 优先级：1. todayChecked 属性 2. 自动判断 checkedDates 中是否包含今天
|
|||
|
|
*/
|
|||
|
|
function isTodayChecked(dayNum: number) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
// 首先检查是否是今天
|
|||
|
|
if (date !== today.value) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// 优先级1：手动设置的 todayChecked
|
|||
|
|
if (props.todayChecked) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
// 优先级2：自动判断 checkedDates 中是否包含今天
|
|||
|
|
if (props.checkedDates.includes(date)) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取打卡日期背景色
|
|||
|
|
*/
|
|||
|
|
function getCheckinColor(dayNum: number) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
const isToday = date === today.value;
|
|||
|
|
const isInCheckedDates = props.checkedDates.includes(date);
|
|||
|
|
|
|||
|
|
// 只有在打卡签到模式下或设置了打卡数据时才返回颜色
|
|||
|
|
if (!props.checkinMode && props.checkedDates.length === 0 && !props.todayChecked) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 今日已打卡显示绿色（优先级：todayChecked > 自动判断）
|
|||
|
|
if (isToday && (props.todayChecked || isInCheckedDates)) {
|
|||
|
|
return props.todayCheckedBgColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他已打卡日期显示橙色
|
|||
|
|
if (isInCheckedDates) {
|
|||
|
|
return props.checkedBgColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打卡签到模式下，未打卡日期显示灰色
|
|||
|
|
if (props.checkinMode) {
|
|||
|
|
return props.uncheckedBgColor;
|
|||
|
|
}
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取打卡日期文字颜色
|
|||
|
|
*/
|
|||
|
|
function getCheckinTextColor(dayNum: number) {
|
|||
|
|
// 只有在打卡签到模式下或设置了打卡数据时才返回颜色
|
|||
|
|
if (!props.checkinMode && props.checkedDates.length === 0 && !props.todayChecked) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
// 已打卡日期显示白色文字
|
|||
|
|
if (props.checkedDates.includes(date) || (date === today.value && props.todayChecked)) {
|
|||
|
|
return props.checkedColor;
|
|||
|
|
}
|
|||
|
|
// 打卡签到模式下，未打卡日期显示白色文字
|
|||
|
|
if (props.checkinMode) {
|
|||
|
|
return props.uncheckedColor;
|
|||
|
|
}
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取打卡日期农历文字颜色
|
|||
|
|
*/
|
|||
|
|
function getCheckinLunarColor(dayNum: number) {
|
|||
|
|
// 只有在打卡签到模式下或设置了打卡数据时才返回颜色
|
|||
|
|
if (!props.checkinMode && props.checkedDates.length === 0 && !props.todayChecked) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
// 已打卡日期的农历显示白色文字
|
|||
|
|
if (props.checkedDates.includes(date) || (date === today.value && props.todayChecked)) {
|
|||
|
|
return props.checkedColor;
|
|||
|
|
}
|
|||
|
|
// 打卡签到模式下，未打卡日期的农历显示白色文字
|
|||
|
|
if (props.checkinMode) {
|
|||
|
|
return props.uncheckedColor;
|
|||
|
|
}
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取自定义插槽的颜色
|
|||
|
|
* 当选中日期时显示白色，否则显示默认颜色
|
|||
|
|
*/
|
|||
|
|
function getSlotColor(dayNum: number) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
// 选中日期的自定义内容显示白色（仅在 isActiveCurrent 为 true 时）
|
|||
|
|
if (props.isActiveCurrent && (activeDate.value === date || startDate.value === date || endDate.value === date)) {
|
|||
|
|
return props.activeColor;
|
|||
|
|
}
|
|||
|
|
// 打卡签到模式下使用对应的颜色
|
|||
|
|
if (props.checkinMode || props.checkedDates.length > 0 || props.todayChecked) {
|
|||
|
|
return getCheckinLunarColor(dayNum) || props.color;
|
|||
|
|
}
|
|||
|
|
return props.color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取日期信息，用于自定义插槽
|
|||
|
|
*/
|
|||
|
|
function getDateInfo(dayNum: number) {
|
|||
|
|
const dateStr = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
const dateObj = new Date(dateStr.replace(/\-/g, '/'));
|
|||
|
|
const dayOfWeek = dateObj.getDay();
|
|||
|
|
const weekNames = [
|
|||
|
|
t('uCalendar.sun'),
|
|||
|
|
t('uCalendar.mon'),
|
|||
|
|
t('uCalendar.tue'),
|
|||
|
|
t('uCalendar.wed'),
|
|||
|
|
t('uCalendar.thu'),
|
|||
|
|
t('uCalendar.fri'),
|
|||
|
|
t('uCalendar.sat')
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const isSelected = activeDate.value === dateStr || startDate.value === dateStr || endDate.value === dateStr;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
year: year.value,
|
|||
|
|
month: month.value,
|
|||
|
|
day: dayNum,
|
|||
|
|
date: dateStr,
|
|||
|
|
week: weekNames[dayOfWeek],
|
|||
|
|
weekNum: dayOfWeek,
|
|||
|
|
isToday: dateStr === today.value,
|
|||
|
|
isHoliday: props.holidays.includes(dateStr),
|
|||
|
|
isWorkday: props.workdays.includes(dateStr),
|
|||
|
|
isChecked: props.checkedDates.includes(dateStr),
|
|||
|
|
isSelected,
|
|||
|
|
isTodayChecked: dateStr === today.value && props.todayChecked,
|
|||
|
|
lunar: lunarArr.value[dayNum - 1] || null
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断是否是节假日
|
|||
|
|
*/
|
|||
|
|
function isHoliday(dayNum: number) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
return props.holidays.includes(date);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断是否是加班日
|
|||
|
|
*/
|
|||
|
|
function isWorkday(dayNum: number) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
return props.workdays.includes(date);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取节日名称（合并内置节日和用户自定义节日）
|
|||
|
|
* 用户传入空字符串可覆盖内置节日，表示不显示该节日
|
|||
|
|
* 支持两种格式：
|
|||
|
|
* 1. 年-月-日：特定年份的节日，如 '2024-04-04': '清明节'
|
|||
|
|
* 2. 月-日：每年的固定节日，如 '04-04': '清明节'
|
|||
|
|
*/
|
|||
|
|
function getFestival(dayNum: number) {
|
|||
|
|
if (!props.showFestival && Object.keys(props.festivals).length === 0) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
const monthDay = `${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
|
|||
|
|
// 优先检查用户自定义节日（特定年份格式）
|
|||
|
|
if (date in props.festivals) {
|
|||
|
|
return props.festivals[date];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 然后检查用户自定义节日（每年固定格式，月-日）
|
|||
|
|
if (monthDay in props.festivals) {
|
|||
|
|
return props.festivals[monthDay];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 最后检查内置节日（如果启用了 showFestival）
|
|||
|
|
if (props.showFestival && builtInFestivals[monthDay]) {
|
|||
|
|
return builtInFestivals[monthDay];
|
|||
|
|
}
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取节假日/加班日文字颜色
|
|||
|
|
* 当选中日期时显示白色，否则显示对应的颜色
|
|||
|
|
*/
|
|||
|
|
function getHolidayWorkdayColor(dayNum: number, defaultColor: string) {
|
|||
|
|
const date = `${year.value}-${formatNum(month.value)}-${formatNum(dayNum)}`;
|
|||
|
|
// 选中日期的节假日/加班日显示白色
|
|||
|
|
if (activeDate.value === date || startDate.value === date || endDate.value === date) {
|
|||
|
|
return props.activeColor;
|
|||
|
|
}
|
|||
|
|
return defaultColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化日历数据
|
|||
|
|
*/
|
|||
|
|
function init() {
|
|||
|
|
let now = new Date();
|
|||
|
|
let minDateObj = new Date(String(props.minDate));
|
|||
|
|
let maxDateObj = new Date(String(props.maxDate || ''));
|
|||
|
|
if (isNaN(maxDateObj.getTime())) maxDateObj = new Date();
|
|||
|
|
if (now < minDateObj) now = minDateObj;
|
|||
|
|
if (now > maxDateObj) now = maxDateObj;
|
|||
|
|
year.value = now.getFullYear();
|
|||
|
|
month.value = now.getMonth() + 1;
|
|||
|
|
day.value = now.getDate();
|
|||
|
|
today.value = `${now.getFullYear()}-${formatNum(month.value)}-${formatNum(day.value)}`;
|
|||
|
|
min.value = initDate(String(props.minDate));
|
|||
|
|
max.value = initDate(String(props.maxDate) || today.value);
|
|||
|
|
|
|||
|
|
// 处理默认选中日期
|
|||
|
|
// 优先级1: defaultDate / startDate / endDate（显式指定日期）
|
|||
|
|
// 优先级2: defaultSelectToday（默认选中今天）
|
|||
|
|
// 优先级3: 不选中任何日期
|
|||
|
|
if (props.mode === 'date' && props.defaultDate) {
|
|||
|
|
// 单选模式：使用 defaultDate（优先级1）
|
|||
|
|
const defaultDateObj = new Date(props.defaultDate.replace(/\-/g, '/'));
|
|||
|
|
if (!isNaN(defaultDateObj.getTime())) {
|
|||
|
|
year.value = defaultDateObj.getFullYear();
|
|||
|
|
month.value = defaultDateObj.getMonth() + 1;
|
|||
|
|
day.value = defaultDateObj.getDate();
|
|||
|
|
// 统一格式为 YYYY-MM-DD，与 getColor 中的格式一致
|
|||
|
|
activeDate.value = `${year.value}-${formatNum(month.value)}-${formatNum(day.value)}`;
|
|||
|
|
} else if (props.defaultSelectToday) {
|
|||
|
|
activeDate.value = today.value;
|
|||
|
|
} else {
|
|||
|
|
activeDate.value = '';
|
|||
|
|
}
|
|||
|
|
} else if (props.mode === 'range' && (props.startDate || props.endDate)) {
|
|||
|
|
// 范围模式：使用 startDate 和 endDate（优先级1）
|
|||
|
|
const startDateObj = props.startDate ? new Date(props.startDate.replace(/\-/g, '/')) : null;
|
|||
|
|
const endDateObj = props.endDate ? new Date(props.endDate.replace(/\-/g, '/')) : null;
|
|||
|
|
|
|||
|
|
if (startDateObj && !isNaN(startDateObj.getTime())) {
|
|||
|
|
// 设置当前显示月份为开始日期所在月份
|
|||
|
|
year.value = startDateObj.getFullYear();
|
|||
|
|
month.value = startDateObj.getMonth() + 1;
|
|||
|
|
|
|||
|
|
// 设置开始日期 - 统一格式为 YYYY-MM-DD
|
|||
|
|
startYear.value = startDateObj.getFullYear();
|
|||
|
|
startMonth.value = startDateObj.getMonth() + 1;
|
|||
|
|
startDay.value = startDateObj.getDate();
|
|||
|
|
startDate.value = `${startYear.value}-${formatNum(startMonth.value)}-${formatNum(startDay.value)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (endDateObj && !isNaN(endDateObj.getTime())) {
|
|||
|
|
// 设置结束日期 - 统一格式为 YYYY-MM-DD
|
|||
|
|
endYear.value = endDateObj.getFullYear();
|
|||
|
|
endMonth.value = endDateObj.getMonth() + 1;
|
|||
|
|
endDay.value = endDateObj.getDate();
|
|||
|
|
endDate.value = `${endYear.value}-${formatNum(endMonth.value)}-${formatNum(endDay.value)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
isStart.value = true;
|
|||
|
|
activeDate.value = '';
|
|||
|
|
} else if (props.defaultSelectToday) {
|
|||
|
|
// 优先级2：默认选中今天
|
|||
|
|
activeDate.value = today.value;
|
|||
|
|
resetRangeState();
|
|||
|
|
} else {
|
|||
|
|
// 优先级3：不选中任何日期
|
|||
|
|
activeDate.value = '';
|
|||
|
|
resetRangeState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
changeData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重置范围选择状态
|
|||
|
|
*/
|
|||
|
|
function resetRangeState() {
|
|||
|
|
startDate.value = '';
|
|||
|
|
startYear.value = 0;
|
|||
|
|
startMonth.value = 0;
|
|||
|
|
startDay.value = 0;
|
|||
|
|
endYear.value = 0;
|
|||
|
|
endMonth.value = 0;
|
|||
|
|
endDay.value = 0;
|
|||
|
|
endDate.value = '';
|
|||
|
|
isStart.value = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 日期字符串转对象
|
|||
|
|
*/
|
|||
|
|
function initDate(date: string) {
|
|||
|
|
let fdate = date.split('-');
|
|||
|
|
return {
|
|||
|
|
year: Number(fdate[0] || 1920),
|
|||
|
|
month: Number(fdate[1] || 1),
|
|||
|
|
day: Number(fdate[2] || 1)
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 判断日期是否可选
|
|||
|
|
*/
|
|||
|
|
function openDisAbled(yearNum: number, monthNum: number, dayNum: number) {
|
|||
|
|
let bool = true;
|
|||
|
|
let date = `${yearNum}/${formatNum(monthNum)}/${formatNum(dayNum)}`;
|
|||
|
|
// let today = this.today.replace(/\-/g, '/');
|
|||
|
|
let minStr = min.value ? `${min.value.year}/${formatNum(min.value.month)}/${formatNum(min.value.day)}` : '';
|
|||
|
|
let maxStr = max.value ? `${max.value.year}/${formatNum(max.value.month)}/${formatNum(max.value.day)}` : '';
|
|||
|
|
let timestamp = new Date(date).getTime();
|
|||
|
|
if (min.value && max.value && timestamp >= new Date(minStr).getTime() && timestamp <= new Date(maxStr).getTime()) {
|
|||
|
|
bool = false;
|
|||
|
|
}
|
|||
|
|
return bool;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生成数组
|
|||
|
|
*/
|
|||
|
|
function generateArray(start: number, end: number) {
|
|||
|
|
return Array.from(new Array(end + 1).keys()).slice(start);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 格式化数字
|
|||
|
|
*/
|
|||
|
|
function formatNum(num: number) {
|
|||
|
|
return num < 10 ? '0' + num : num + '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取某月天数
|
|||
|
|
*/
|
|||
|
|
function getMonthDay(yearNum: number, monthNum: number) {
|
|||
|
|
return new Date(yearNum, monthNum, 0).getDate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取某月第一天星期几
|
|||
|
|
*/
|
|||
|
|
function getWeekday(yearNum: number, monthNum: number) {
|
|||
|
|
let date = new Date(`${yearNum}/${monthNum}/01 00:00:00`);
|
|||
|
|
return date.getDay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 检查年月是否超出范围
|
|||
|
|
*/
|
|||
|
|
function checkRange(yearNum: number, monthNum: number) {
|
|||
|
|
if (yearNum < Number(props.minYear) || yearNum > Number(props.maxYear)) {
|
|||
|
|
uni.showToast({ title: t('uCalendar.outOfRange'), icon: 'none' });
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const beforeMin =
|
|||
|
|
min.value && (yearNum < min.value.year || (yearNum === min.value.year && monthNum < min.value.month));
|
|||
|
|
const afterMax =
|
|||
|
|
max.value && (yearNum > max.value.year || (yearNum === max.value.year && monthNum > max.value.month));
|
|||
|
|
|
|||
|
|
if (beforeMin || afterMax) {
|
|||
|
|
uni.showToast({ title: t('uCalendar.outOfRange'), icon: 'none' });
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换月份
|
|||
|
|
*/
|
|||
|
|
function changeMonthHandler(isAdd: number) {
|
|||
|
|
if (isAdd) {
|
|||
|
|
let m = month.value + 1;
|
|||
|
|
let y = m > 12 ? year.value + 1 : year.value;
|
|||
|
|
m = m > 12 ? 1 : m;
|
|||
|
|
if (!checkRange(y, m)) {
|
|||
|
|
month.value = m;
|
|||
|
|
year.value = y;
|
|||
|
|
changeData();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
let m = month.value - 1;
|
|||
|
|
let y = m < 1 ? year.value - 1 : year.value;
|
|||
|
|
m = m < 1 ? 12 : m;
|
|||
|
|
if (!checkRange(y, m)) {
|
|||
|
|
month.value = m;
|
|||
|
|
year.value = y;
|
|||
|
|
changeData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换年份：若 minDate/maxDate 的月份在当前年超出，则切换到该年的最小/最大有效月
|
|||
|
|
*/
|
|||
|
|
function changeYearHandler(isAdd: number) {
|
|||
|
|
let y = isAdd ? year.value + 1 : year.value - 1;
|
|||
|
|
let m = month.value;
|
|||
|
|
if (min.value && y === min.value.year && m < min.value.month) {
|
|||
|
|
m = min.value.month;
|
|||
|
|
}
|
|||
|
|
if (max.value && y === max.value.year && m > max.value.month) {
|
|||
|
|
m = max.value.month;
|
|||
|
|
}
|
|||
|
|
if (!checkRange(y, m)) {
|
|||
|
|
year.value = y;
|
|||
|
|
month.value = m;
|
|||
|
|
changeData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新日历数据
|
|||
|
|
*/
|
|||
|
|
function changeData() {
|
|||
|
|
days.value = getMonthDay(year.value, month.value);
|
|||
|
|
daysArr.value = generateArray(1, days.value);
|
|||
|
|
weekday.value = getWeekday(year.value, month.value);
|
|||
|
|
weekdayArr.value = generateArray(1, weekday.value);
|
|||
|
|
if (props.showLunar) {
|
|||
|
|
lunarArr.value = [];
|
|||
|
|
daysArr.value.forEach(d => {
|
|||
|
|
lunarArr.value.push(getLunar(year.value, month.value, d));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (props.isChange && props.mode == 'date') {
|
|||
|
|
btnFix(true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取农历
|
|||
|
|
*/
|
|||
|
|
function getLunar(year: any, month: any, day: any) {
|
|||
|
|
const val = Calendar.solar2lunar(year, month, day);
|
|||
|
|
return {
|
|||
|
|
dayCn: val.IDayCn,
|
|||
|
|
weekCn: val.ncWeek,
|
|||
|
|
monthCn: val.IMonthCn,
|
|||
|
|
day: val.lDay,
|
|||
|
|
week: val.nWeek,
|
|||
|
|
month: val.lMonth,
|
|||
|
|
year: val.lYear
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 日期点击事件
|
|||
|
|
*/
|
|||
|
|
function dateClick(dayIdx: number) {
|
|||
|
|
// 只读模式下禁止点击
|
|||
|
|
if (props.readonly) return;
|
|||
|
|
|
|||
|
|
const d = dayIdx + 1;
|
|||
|
|
if (!openDisAbled(year.value, month.value, d)) {
|
|||
|
|
day.value = d;
|
|||
|
|
let date = `${year.value}-${formatNum(month.value)}-${formatNum(d)}`;
|
|||
|
|
if (props.mode == 'date') {
|
|||
|
|
activeDate.value = date;
|
|||
|
|
// 页面模式下，单选日期选择完成自动触发change事件
|
|||
|
|
// 打卡签到模式下，弹窗模式也立即触发change事件
|
|||
|
|
if (props.isPage || props.checkinMode) {
|
|||
|
|
btnFix(true);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
let compare =
|
|||
|
|
new Date(date.replace(/\-/g, '/')).getTime() < new Date(startDate.value.replace(/\-/g, '/')).getTime();
|
|||
|
|
if (isStart.value || compare) {
|
|||
|
|
startDate.value = date;
|
|||
|
|
startYear.value = year.value;
|
|||
|
|
startMonth.value = month.value;
|
|||
|
|
startDay.value = day.value;
|
|||
|
|
endYear.value = 0;
|
|||
|
|
endMonth.value = 0;
|
|||
|
|
endDay.value = 0;
|
|||
|
|
endDate.value = '';
|
|||
|
|
activeDate.value = '';
|
|||
|
|
isStart.value = false;
|
|||
|
|
} else {
|
|||
|
|
endDate.value = date;
|
|||
|
|
endYear.value = year.value;
|
|||
|
|
endMonth.value = month.value;
|
|||
|
|
endDay.value = day.value;
|
|||
|
|
isStart.value = true;
|
|||
|
|
// 页面模式下，范围选择完成（选了结束日期）自动触发change事件
|
|||
|
|
if (props.isPage) {
|
|||
|
|
btnFix(true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 关闭弹窗
|
|||
|
|
*/
|
|||
|
|
function close() {
|
|||
|
|
emit('input', false);
|
|||
|
|
emit('update:modelValue', false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取星期文本
|
|||
|
|
*/
|
|||
|
|
function getWeekText(date: string) {
|
|||
|
|
const d = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
|
|||
|
|
let week = d.getDay();
|
|||
|
|
return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 确定按钮事件
|
|||
|
|
*/
|
|||
|
|
function btnFix(show: boolean) {
|
|||
|
|
// 页面模式下不关闭，弹窗模式下关闭
|
|||
|
|
if (!show && !props.isPage) {
|
|||
|
|
close();
|
|||
|
|
}
|
|||
|
|
if (props.mode == 'date') {
|
|||
|
|
let arr = activeDate.value.split('-');
|
|||
|
|
let y = props.isChange ? year.value : Number(arr[0]);
|
|||
|
|
let m = props.isChange ? month.value : Number(arr[1]);
|
|||
|
|
let d = props.isChange ? day.value : Number(arr[2]);
|
|||
|
|
let daysNum = getMonthDay(y, m);
|
|||
|
|
let result = `${y}-${formatNum(m)}-${formatNum(d)}`;
|
|||
|
|
let weekText = getWeekText(result);
|
|||
|
|
let isToday = false;
|
|||
|
|
if (result == today.value) {
|
|||
|
|
// 今天
|
|||
|
|
isToday = true;
|
|||
|
|
}
|
|||
|
|
const lunar = props.showLunar ? getLunar(y, m, d) : null;
|
|||
|
|
emit('change', {
|
|||
|
|
year: y,
|
|||
|
|
month: m,
|
|||
|
|
day: d,
|
|||
|
|
days: daysNum,
|
|||
|
|
result: result,
|
|||
|
|
week: weekText,
|
|||
|
|
isToday: isToday,
|
|||
|
|
lunar: lunar
|
|||
|
|
// switch: show //是否是切换年月操作
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
if (!startDate.value || !endDate.value) return;
|
|||
|
|
let startMonthStr = formatNum(startMonth.value);
|
|||
|
|
let startDayStr = formatNum(startDay.value);
|
|||
|
|
let startDateStr = `${startYear.value}-${startMonthStr}-${startDayStr}`;
|
|||
|
|
let startWeek = getWeekText(startDateStr);
|
|||
|
|
let endMonthStr = formatNum(endMonth.value);
|
|||
|
|
let endDayStr = formatNum(endDay.value);
|
|||
|
|
let endDateStr = `${endYear.value}-${endMonthStr}-${endDayStr}`;
|
|||
|
|
let endWeek = getWeekText(endDateStr);
|
|||
|
|
let startLunar = null;
|
|||
|
|
let endLunar = null;
|
|||
|
|
if (props.showLunar) {
|
|||
|
|
startLunar = getLunar(startYear.value, startMonth.value, startDay.value);
|
|||
|
|
endLunar = getLunar(endYear.value, endMonth.value, endDay.value);
|
|||
|
|
}
|
|||
|
|
emit('change', {
|
|||
|
|
startYear: startYear.value,
|
|||
|
|
startMonth: startMonth.value,
|
|||
|
|
startDay: startDay.value,
|
|||
|
|
startDate: startDateStr,
|
|||
|
|
startWeek: startWeek,
|
|||
|
|
endYear: endYear.value,
|
|||
|
|
endMonth: endMonth.value,
|
|||
|
|
endDay: endDay.value,
|
|||
|
|
endDate: endDateStr,
|
|||
|
|
endWeek: endWeek,
|
|||
|
|
startLunar: startLunar,
|
|||
|
|
endLunar: endLunar
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-calendar {
|
|||
|
|
color: $u-content-color;
|
|||
|
|
|
|||
|
|
&--page {
|
|||
|
|
background-color: var(--u-bg-white);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__header {
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
background-color: var(--u-bg-white);
|
|||
|
|
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: var(--u-bg-white);
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--checked {
|
|||
|
|
.u-calendar__content__item__inner {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--today-checked {
|
|||
|
|
.u-calendar__content__item__inner {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--checkin-mode {
|
|||
|
|
.u-calendar__content__item__inner {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__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;
|
|||
|
|
|
|||
|
|
&__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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__day {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__lunar {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
transform: scale(0.85);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 节假日/加班日标签样式
|
|||
|
|
&__holiday,
|
|||
|
|
&__workday {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
transform: scale(0.85);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 右上角标记样式（休/班）
|
|||
|
|
&__mark {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 8rpx;
|
|||
|
|
right: 8rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
transform: scale(0.75);
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
&--holiday {
|
|||
|
|
color: var(--u-type-error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--workday {
|
|||
|
|
color: var(--u-type-primary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 节日名称样式（与农历保持一致）
|
|||
|
|
&__festival {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
transform: scale(0.85);
|
|||
|
|
color: var(--u-type-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 占位元素样式
|
|||
|
|
&__placeholder {
|
|||
|
|
min-height: 22rpx;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__check-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 4rpx;
|
|||
|
|
top: 4rpx;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__checkmark {
|
|||
|
|
@include vue-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__inner--today-checked {
|
|||
|
|
@include vue-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__bg-month {
|
|||
|
|
position: absolute;
|
|||
|
|
font-size: 130px;
|
|||
|
|
line-height: 130px;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
color: var(--u-border-color);
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
@include vue-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: var(--u-bg-white);
|
|||
|
|
padding: 0 40rpx 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
|
|||
|
|
&__choose {
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__btn {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|