feat: 学习分析
This commit is contained in:
杨航
@@ -157,6 +157,7 @@ export function downloadVoiceFile(url) {
|
||||
uni.downloadFile({
|
||||
url: `${baseUrl}${url}`,
|
||||
header,
|
||||
timeout: 180000,
|
||||
success(result) {
|
||||
console.log(result)
|
||||
resolve(result)
|
||||
|
||||
+1
-1
@@ -503,7 +503,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/static/study",
|
||||
"path": "pages/analytics/study",
|
||||
"style": {
|
||||
"navigationBarTitleText": "学习分析",
|
||||
"app-plus": {
|
||||
|
||||
@@ -0,0 +1,469 @@
|
||||
<template>
|
||||
<view class="study-analytics max_page">
|
||||
<view class="cont-body">
|
||||
<view class="top-box">
|
||||
<view class="top-title">
|
||||
<view class="back-icon" @click="common.navigateBack()"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-box">
|
||||
<view class="tabs-box">
|
||||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="false" active-style="font-weight:bold; color:#000;"
|
||||
class="font_pf my_tabs" :inactive-style="{ color: '#333333', fontSize: '28rpx', fontWeight: '500' }"
|
||||
:activeStyle="{ color: '#333333', fontSize: '28rpx', fontWeight: '600' }"></uv-tabs>
|
||||
</view>
|
||||
<view class="calendar-box" @click="openCalendar">统计周期</view>
|
||||
<uv-calendar ref="calendarRef" mode="range" @confirm="calendarConfirm" minDate="2025-01-01" :maxDate="maxDate" monthNum="100" :allowSameDay="true"></uv-calendar>
|
||||
<view class="analytics-items">
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程学习时长
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{6.5}}</text>
|
||||
<text class="analytics-item-value-unit">h</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程学习次数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{14}}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程练习时长
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{24.4}}</text>
|
||||
<text class="analytics-item-value-unit">h</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
完成任务数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{14}}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
完成考试数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{14}}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
考试合格率
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{82.8}}</text>
|
||||
<text class="analytics-item-value-unit">%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
陪练次数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{14}}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
课程学习次数
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{14}}</text>
|
||||
<text class="analytics-item-value-unit">次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analytics-item">
|
||||
<view class="analytics-item-title">
|
||||
软件用时
|
||||
</view>
|
||||
<view class="analytics-item-value">
|
||||
<text class="analytics-item-value-v">{{44.4}}</text>
|
||||
<text class="analytics-item-value-unit">h</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box dens">
|
||||
<view class="dens-item" v-for="item in 5">
|
||||
<view class="item-title">话术完整性</view>
|
||||
<view class="item-cont">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box study">
|
||||
<view class="study-item">
|
||||
<view class="item-title bg-tm">时间管理： {{'规律性学习者'}}</view>
|
||||
<view class="item-cont study1-bg">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
<view class="study-item">
|
||||
<view class="item-title bg-know">知识吸收： {{'听觉型学习者'}}</view>
|
||||
<view class="item-cont study2-bg">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box study1">
|
||||
<view class="study1-item">
|
||||
<view class="item-cont study3-bg">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluation-box course">
|
||||
<CourseItem v-for="item in courseList" :itemInfo="item" @clickItem="toCourseDetail(item)" />
|
||||
<view class="empty-box" v-if="courseList.length === 0">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import common from '@/common/common'
|
||||
import {
|
||||
getTraTagListApi,
|
||||
queryTraPartnerCatelogList,
|
||||
queryCrsInfoByCatalogApi
|
||||
} from '@/api/sparring.js'
|
||||
import {
|
||||
onMounted,
|
||||
ref,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import CourseItem from '@/components/course-item/course-item.vue'
|
||||
const tabList = ref([{
|
||||
name: '本月',
|
||||
value: 'm'
|
||||
},
|
||||
{
|
||||
name: '本年',
|
||||
value: 'y'
|
||||
},
|
||||
{
|
||||
name: '累计',
|
||||
value: 'a'
|
||||
}
|
||||
])
|
||||
const courseList = ref([])
|
||||
const maxDate = computed(()=> {
|
||||
let _date = new Date()
|
||||
let _year = _date.getFullYear()
|
||||
let _month = _date.getMonth() + 1
|
||||
let _day = new Date(_year, _month, 0).getDate()
|
||||
return `${_year}-${_month < 10 ? '0' + _month: _month}-${_day < 10 ? '0' + _day: _day}`
|
||||
})
|
||||
const calendarRef = ref()
|
||||
const openCalendar = () => {
|
||||
calendarRef.value.open()
|
||||
}
|
||||
const calendarConfirm = (data) => {
|
||||
console.log('data:',data)
|
||||
}
|
||||
// 跳转 课程详情
|
||||
const toCourseDetail = item => {
|
||||
common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum + '&crsId=' + item.crsId)
|
||||
}
|
||||
const changeTab = (info) => {
|
||||
console.log(info)
|
||||
}
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my_tabs {
|
||||
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
background: linear-gradient(90deg, #06f 0%, rgb(0, 159, 255) 50%, rgb(255, 255, 255) 100%) !important;
|
||||
}
|
||||
|
||||
:deep(.uv-tabs__wrapper__nav__item) {
|
||||
padding: 0 20rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.study-analytics {
|
||||
position: relative;
|
||||
background-color: #ddeafa;
|
||||
|
||||
.cont-body {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: var(--status-bar-height) 20rpx 24rpx;
|
||||
// padding: 280rpx 20rpx 24rpx;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/static/images/analytics/bg1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-attachment: local;
|
||||
|
||||
|
||||
.top-box {
|
||||
height: 280rpx;
|
||||
width: 100%;
|
||||
// position: fixed;
|
||||
// float: left;
|
||||
// margin-top: var(--status-bar-height);
|
||||
|
||||
.top-title {
|
||||
height: 90rpx;
|
||||
// background-color: red;
|
||||
text-align: center;
|
||||
font-size: 33rpx;
|
||||
padding: 10rpx 100rpx 0;
|
||||
line-height: 46rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// margin-bottom: 23rpx;
|
||||
.arrow-icon {
|
||||
position: absolute;
|
||||
left: 36rpx;
|
||||
top: 20rpx;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.feedback-icon {
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
right: 50rpx;
|
||||
top: 33rpx;
|
||||
transform: translateY(-50%);
|
||||
background: url(@/static/images/sparring/feedback.png) no-repeat;
|
||||
background-size: 28rpx 28rpx;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
left: 50rpx;
|
||||
top: 33rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 4rpx solid #000;
|
||||
border-left: 4rpx solid #000;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analytics-box {
|
||||
height: 490rpx;
|
||||
background: url(@/static/images/analytics/bg2.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.calendar-box {
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 25rpx;
|
||||
color: #06f;
|
||||
padding-left: 40rpx;
|
||||
background: url(@/static/images/analytics/date-icon.png) no-repeat;
|
||||
background-size: 30rpx 30rpx;
|
||||
background-position: left center;
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.analytics-items {
|
||||
padding-top: 20rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.analytics-item {
|
||||
padding-bottom: 12rpx;
|
||||
box-sizing: border-box;
|
||||
width: 33.3%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 128rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
&-title {
|
||||
font-size: 25rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&-value {
|
||||
font-size: 54rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&-unit {
|
||||
font-size: 28rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.evaluation-box {
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 78rpx;
|
||||
background-position: 26rpx 26rpx;
|
||||
padding: 100rpx 26rpx 24rpx;
|
||||
border-radius: 15rpx;
|
||||
margin-bottom: 24rpx;
|
||||
&.dens {
|
||||
background-image: url(@/static/images/analytics/weidu.png);
|
||||
}
|
||||
&.study {
|
||||
background-image: url(@/static/images/analytics/study1.png)
|
||||
}
|
||||
&.study1 {
|
||||
background-image: url(@/static/images/analytics/study.png);
|
||||
}
|
||||
&.course {
|
||||
background-image: url(@/static/images/analytics/course.png);
|
||||
}
|
||||
|
||||
// .dens-item {
|
||||
// padding: 23rpx 0;
|
||||
// .item-title{
|
||||
// line-height: 40rpx;
|
||||
// position: relative;
|
||||
// padding: 8rpx 46rpx 8rpx 26rpx;
|
||||
// line-height: 42rpx;
|
||||
// font-size: 29rpx;
|
||||
// margin-bottom: 16rpx;
|
||||
// &::before{
|
||||
// content: '';
|
||||
// display: block;
|
||||
// background-color: #000;
|
||||
// width: 12rpx;
|
||||
// height: 12rpx;
|
||||
// border-radius: 50%;
|
||||
// position: absolute;
|
||||
// left: 0rpx;
|
||||
// top: 22rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .item-cont {
|
||||
// font-size: 28rpx;
|
||||
// line-height: 50rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
.study-item,.study1-item, .dens-item{
|
||||
padding: 12rpx 0;
|
||||
.item-title{
|
||||
line-height: 40rpx;
|
||||
position: relative;
|
||||
padding: 8rpx 46rpx 8rpx 26rpx;
|
||||
line-height: 42rpx;
|
||||
font-size: 29rpx;
|
||||
margin-bottom: 16rpx;
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: #000;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0rpx;
|
||||
top: 22rpx;
|
||||
}
|
||||
&.bg-tm{
|
||||
padding-left: 54rpx;
|
||||
background-image: url(@/static/images/analytics/time-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 38rpx 40rpx;
|
||||
background-position: left center;
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.bg-know{
|
||||
padding-left: 54rpx;
|
||||
background-image: url(@/static/images/analytics/knowledge.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 38rpx 40rpx;
|
||||
background-position: left center;
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-cont {
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
&.study1-bg{
|
||||
background-color: #e4efff;
|
||||
border-radius: 15rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
width: calc(100% - 54rpx);
|
||||
margin-left: 54rpx;
|
||||
}
|
||||
&.study2-bg{
|
||||
background-color: #f6f0df;
|
||||
border-radius: 15rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
width: calc(100% - 54rpx);
|
||||
margin-left: 54rpx;
|
||||
}
|
||||
&.study3-bg{
|
||||
background-color: #e4efff;
|
||||
border-radius: 15rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
// width: calc(100% - 54rpx);
|
||||
// margin-left: 54rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty-box{
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -806,6 +806,10 @@
|
||||
//#ifdef APP-PLUS
|
||||
uni.offKeyboardHeightChange(setHeight)
|
||||
// #endif
|
||||
try {
|
||||
teacherVoiceObj?.stop()
|
||||
teacherVoiceObj.src = ''
|
||||
} catch {}
|
||||
// common.show('提示信息', '检测到您已离开，即将退出学习页面。',false, '','确认').then((res) => {
|
||||
// common.redirectTo(`/pages/courseDetail/index?crsId=${crsId.value}&crsNum=${crsNum.value}&from=study`)
|
||||
// }).finally(() => {})
|
||||
|
||||
@@ -637,6 +637,9 @@
|
||||
case 'AI学':
|
||||
common.switchTab('/pages/course/index');
|
||||
break;
|
||||
case 'AI练':
|
||||
common.navigateTo('/pages/sparring/index');
|
||||
break;
|
||||
case 'AI考':
|
||||
common.navigateTo('/pages/testingHall/index');
|
||||
break;
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
<image class="icon" src="@/static/images/index/navigation_wrong_question.png"></image>
|
||||
<view class="title">错题本</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" @click="common.navigateTo('/pages/analytics/study')">
|
||||
<image class="icon" src="@/static/images/index/navigation_learning_analysis.png"></image>
|
||||
<view class="title">学习分析</view>
|
||||
</view>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
+1
-1
@@ -109,7 +109,7 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/static/study",
|
||||
"path": "pages/analytics/study",
|
||||
"style": {
|
||||
"navigationBarTitleText": "学习分析",
|
||||
"app-plus": {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 563 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,16 @@
|
||||
## 1.0.6（2023-11-03）
|
||||
1. **该版本不再维护**，推荐使用新版本[https://ext.dcloud.net.cn/plugin?name=uv-calendars](https://ext.dcloud.net.cn/plugin?name=uv-calendars)
|
||||
## 1.0.5（2023-07-02）
|
||||
uv-calendar 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/calendar.html
|
||||
## 1.0.4（2023-06-15）
|
||||
1. formatter格式化中增加topInfo参数
|
||||
## 1.0.3（2023-06-08）
|
||||
1. 增加点击日期change回调
|
||||
2. 优化
|
||||
## 1.0.2（2023-06-05）
|
||||
1. 修改多个时间选择的时候存在反选的BUG
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-calendar 日历
|
||||
@@ -0,0 +1,546 @@
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @github https://github.com/jjonline/calendar.js
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||
* @Version 1.0.3
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||
/** Add By JJonline@JJonline.Cn**/
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||
0x0d520], // 2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function (y) {
|
||||
var i; var sum = 348
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||
return (sum + this.leapDays(y))
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||
return (this.lunarInfo[y - 1900] & 0xf)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function (y) {
|
||||
if (this.leapMonth(y)) {
|
||||
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||
}
|
||||
return (0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var ms = m - 1
|
||||
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||
} else {
|
||||
return (this.solarMonth[ms])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function (lYear) {
|
||||
var ganKey = (lYear - 3) % 10
|
||||
var zhiKey = (lYear - 3) % 12
|
||||
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function (cMonth, cDay) {
|
||||
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function (offset) {
|
||||
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function (y, n) {
|
||||
if (y < 1900 || y > 2100) { return -1 }
|
||||
if (n < 1 || n > 24) { return -1 }
|
||||
var _table = this.sTermInfo[y - 1900]
|
||||
var _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
]
|
||||
var _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2)
|
||||
]
|
||||
return parseInt(_calday[n - 1])
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function (m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var s = this.nStr3[m - 1]
|
||||
s += '\u6708'// 加上月字
|
||||
return s
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function (d) { // 日 => \u65e5
|
||||
var s
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break
|
||||
break
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break
|
||||
break
|
||||
default:
|
||||
s = this.nStr2[Math.floor(d / 10)]
|
||||
s += this.nStr1[d % 10]
|
||||
}
|
||||
return (s)
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function (y) {
|
||||
return this.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||
// 年份限定、上限
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1// undefined转换为数字变为NaN
|
||||
}
|
||||
// 公历传参最下限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1
|
||||
}
|
||||
// 未传参 获得当天
|
||||
if (!y) {
|
||||
var objDate = new Date()
|
||||
} else {
|
||||
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
var i; var leap = 0; var temp = 0
|
||||
// 修正ymd参数
|
||||
var y = objDate.getFullYear()
|
||||
var m = objDate.getMonth() + 1
|
||||
var d = objDate.getDate()
|
||||
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = this.lYearDays(i)
|
||||
offset -= temp
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; i--
|
||||
}
|
||||
|
||||
// 是否今天
|
||||
var isTodayObj = new Date()
|
||||
var isToday = false
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true
|
||||
}
|
||||
// 星期几
|
||||
var nWeek = objDate.getDay()
|
||||
var cWeek = this.nStr1[nWeek]
|
||||
// 数字表示周几顺应天朝周一开始的惯例
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7
|
||||
}
|
||||
// 农历年
|
||||
var year = i
|
||||
var leap = this.leapMonth(i) // 闰哪个月
|
||||
var isLeap = false
|
||||
|
||||
// 效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
// 闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i
|
||||
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||
} else {
|
||||
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||
}
|
||||
// 解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||
offset -= temp
|
||||
}
|
||||
// 闰月导致数组下标重叠取反
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||
if (isLeap) {
|
||||
isLeap = false
|
||||
} else {
|
||||
isLeap = true; --i
|
||||
}
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i
|
||||
}
|
||||
// 农历月
|
||||
var month = i
|
||||
// 农历日
|
||||
var day = offset + 1
|
||||
// 天干地支处理
|
||||
var sm = m - 1
|
||||
var gzY = this.toGanZhiYear(year)
|
||||
|
||||
// 当月的两个节气
|
||||
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||
|
||||
// 依据12节气修正干支月
|
||||
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||
if (d >= firstNode) {
|
||||
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||
}
|
||||
|
||||
// 传入的日期的节气与否
|
||||
var isTerm = false
|
||||
var Term = null
|
||||
if (firstNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 2]
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 1]
|
||||
}
|
||||
// 日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||
// 该日期所属的星座
|
||||
var astro = this.toAstro(m, d)
|
||||
|
||||
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth
|
||||
var leapOffset = 0
|
||||
var leapMonth = this.leapMonth(y)
|
||||
var leapDay = this.leapDays(y)
|
||||
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||
var day = this.monthDays(y, m)
|
||||
var _day = day
|
||||
// bugFix 2016-9-25
|
||||
// if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = this.leapDays(y, m)
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||
|
||||
// 计算农历的时间差
|
||||
var offset = 0
|
||||
for (var i = 1900; i < y; i++) {
|
||||
offset += this.lYearDays(i)
|
||||
}
|
||||
var leap = 0; var isAdd = false
|
||||
for (var i = 1; i < m; i++) {
|
||||
leap = this.leapMonth(y)
|
||||
if (!isAdd) { // 处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += this.leapDays(y); isAdd = true
|
||||
}
|
||||
}
|
||||
offset += this.monthDays(y, i)
|
||||
}
|
||||
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) { offset += day }
|
||||
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||
var cY = calObj.getUTCFullYear()
|
||||
var cM = calObj.getUTCMonth() + 1
|
||||
var cD = calObj.getUTCDate()
|
||||
|
||||
return this.solar2lunar(cY, cM, cD)
|
||||
}
|
||||
}
|
||||
|
||||
export default calendar
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="uv-calendar-header uv-border-bottom">
|
||||
<text
|
||||
class="uv-calendar-header__title"
|
||||
v-if="showTitle"
|
||||
>{{ title }}</text>
|
||||
<text
|
||||
class="uv-calendar-header__subtitle"
|
||||
v-if="showSubtitle"
|
||||
>{{ subtitle }}</text>
|
||||
<view class="uv-calendar-header__weekdays">
|
||||
<text class="uv-calendar-header__weekdays__weekday">一</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">二</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">三</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">四</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">五</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">六</text>
|
||||
<text class="uv-calendar-header__weekdays__weekday">日</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
export default {
|
||||
name: 'uv-calendar-header',
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 副标题
|
||||
subtitle: {
|
||||
type: [String,null],
|
||||
default: ''
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
name() {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$show-border: 1;
|
||||
$show-border-bottom: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-calendar-header {
|
||||
padding-bottom: 4px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: $uv-main-color;
|
||||
text-align: center;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: $uv-main-color;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__weekdays {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__weekday {
|
||||
font-size: 13px;
|
||||
color: $uv-main-color;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,616 @@
|
||||
<template>
|
||||
<view class="uv-calendar-month-wrapper" ref="uv-calendar-month-wrapper">
|
||||
<view v-for="(item, index) in months" :key="index" :class="[`uv-calendar-month-${index}`]"
|
||||
:ref="`uv-calendar-month-${index}`" :id="`month-${index}`">
|
||||
<text v-if="index !== 0" class="uv-calendar-month__title">{{ item.year }}年{{ item.month }}月</text>
|
||||
<view class="uv-calendar-month__days">
|
||||
<view v-if="showMark" class="uv-calendar-month__days__month-mark-wrapper">
|
||||
<text class="uv-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
|
||||
</view>
|
||||
<view class="uv-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
|
||||
:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
|
||||
:class="[item1.selected && 'uv-calendar-month__days__day__select--selected']">
|
||||
<view class="uv-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
|
||||
<text v-if="getTopInfo(index, index1, item1)"
|
||||
class="uv-calendar-month__days__day__select__top-info"
|
||||
:class="[item1.disabled && 'uv-calendar-month__days__day__select__top-info--disabled']"
|
||||
:style="[textStyle(item1)]"
|
||||
>{{ getTopInfo(index, index1, item1) }}</text>
|
||||
<text class="uv-calendar-month__days__day__select__info"
|
||||
:class="[item1.disabled && 'uv-calendar-month__days__day__select__info--disabled']"
|
||||
:style="[textStyle(item1)]">{{ item1.day }}</text>
|
||||
<text v-if="getBottomInfo(index, index1, item1)"
|
||||
class="uv-calendar-month__days__day__select__buttom-info"
|
||||
:class="[item1.disabled && 'uv-calendar-month__days__day__select__buttom-info--disabled']"
|
||||
:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
|
||||
<text v-if="item1.dot" class="uv-calendar-month__days__day__select__dot"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js';
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
|
||||
export default {
|
||||
name: 'uv-calendar-month',
|
||||
emits:['monthSelected','updateMonthTop','change'],
|
||||
mixins: [mpMixin, mixin],
|
||||
props: {
|
||||
// 是否显示月份背景色
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 主题色，对底部按钮和选中日期有效
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 月份数据
|
||||
months: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 日期选择类型
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
// 日期行高
|
||||
rowHeight: {
|
||||
type: [String, Number],
|
||||
default: 58
|
||||
},
|
||||
// mode=multiple时，最多可选多少个日期
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: Infinity
|
||||
},
|
||||
// mode=range时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// mode=range时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
defaultDate: {
|
||||
type: [Array, String, Date],
|
||||
default: null
|
||||
},
|
||||
// 最小的可选日期
|
||||
minDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 最大可选日期
|
||||
maxDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 如果没有设置maxDate，则往后推多少个月
|
||||
maxMonth: {
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
// 是否为只读状态，只读状态下禁止选择日期
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: Infinity
|
||||
},
|
||||
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
rangePrompt: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||
showRangePrompt: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 每个日期的宽度
|
||||
width: 0,
|
||||
// 当前选中的日期item
|
||||
item: {},
|
||||
selected: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedChange: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setDefaultDate()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||
selectedChange() {
|
||||
return [this.minDate, this.maxDate, this.defaultDate]
|
||||
},
|
||||
dayStyle(index1, index2, item) {
|
||||
return (index1, index2, item) => {
|
||||
const style = {}
|
||||
let week = item.week
|
||||
// 不进行四舍五入的形式保留2位小数
|
||||
const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
|
||||
// 得出每个日期的宽度
|
||||
// #ifdef APP-NVUE
|
||||
style.width = this.$uv.addUnit(dayWidth)
|
||||
// #endif
|
||||
style.height = this.$uv.addUnit(this.rowHeight)
|
||||
if (index2 === 0) {
|
||||
// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
|
||||
week = (week === 0 ? 7 : week) - 1
|
||||
style.marginLeft = this.$uv.addUnit(week * dayWidth)
|
||||
}
|
||||
if (this.mode === 'range') {
|
||||
// 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
|
||||
style.paddingLeft = 0
|
||||
style.paddingRight = 0
|
||||
style.paddingBottom = 0
|
||||
style.paddingTop = 0
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
daySelectStyle() {
|
||||
return (index1, index2, item) => {
|
||||
let date = dayjs(item.date).format("YYYY-MM-DD"),
|
||||
style = {}
|
||||
// 判断date是否在selected数组中，因为月份可能会需要补0，所以使用dateSame判断，而不用数组的includes判断
|
||||
if (this.selected.some(item => this.dateSame(item, date))) {
|
||||
style.backgroundColor = this.color
|
||||
}
|
||||
if (this.mode === 'single') {
|
||||
if (date === this.selected[0]) {
|
||||
// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
} else if (this.mode === 'range') {
|
||||
if (this.selected.length >= 2) {
|
||||
const len = this.selected.length - 1
|
||||
// 第一个日期设置左上角和左下角的圆角
|
||||
if (this.dateSame(date, this.selected[0])) {
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
}
|
||||
// 最后一个日期设置右上角和右下角的圆角
|
||||
if (this.dateSame(date, this.selected[len])) {
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
|
||||
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
|
||||
.selected[len]))) {
|
||||
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||
// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
|
||||
style.opacity = 0.7
|
||||
}
|
||||
} else if (this.selected.length === 1) {
|
||||
// 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
|
||||
// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
}
|
||||
} else {
|
||||
if (this.selected.some(item => this.dateSame(item, date))) {
|
||||
style.borderTopLeftRadius = '3px'
|
||||
style.borderBottomLeftRadius = '3px'
|
||||
style.borderTopRightRadius = '3px'
|
||||
style.borderBottomRightRadius = '3px'
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
// 某个日期是否被选中
|
||||
textStyle() {
|
||||
return (item) => {
|
||||
const date = dayjs(item.date).format("YYYY-MM-DD"),
|
||||
style = {}
|
||||
// 选中的日期，提示文字设置白色
|
||||
if (this.selected.some(item => this.dateSame(item, date))) {
|
||||
style.color = '#ffffff'
|
||||
}
|
||||
if (this.mode === 'range') {
|
||||
const len = this.selected.length - 1
|
||||
// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
|
||||
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
|
||||
.selected[len]))) {
|
||||
style.color = this.color
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
// 获取顶部的提示文字
|
||||
getTopInfo() {
|
||||
return (index1, index2, item) => {
|
||||
return item.topInfo;
|
||||
}
|
||||
},
|
||||
// 获取底部的提示文字
|
||||
getBottomInfo() {
|
||||
return (index1, index2, item) => {
|
||||
const date = dayjs(item.date).format("YYYY-MM-DD")
|
||||
const bottomInfo = item.bottomInfo
|
||||
// 当为日期范围模式时，且选择的日期个数大于0时
|
||||
if (this.mode === 'range' && this.selected.length > 0) {
|
||||
if (this.selected.length === 1) {
|
||||
// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
|
||||
if (this.dateSame(date, this.selected[0])) return this.startText
|
||||
else return bottomInfo
|
||||
} else {
|
||||
const len = this.selected.length - 1
|
||||
// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
|
||||
if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) &&
|
||||
len === 1) {
|
||||
// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
|
||||
return `${this.startText}/${this.endText}`
|
||||
} else if (this.dateSame(date, this.selected[0])) {
|
||||
return this.startText
|
||||
} else if (this.dateSame(date, this.selected[len])) {
|
||||
return this.endText
|
||||
} else {
|
||||
return bottomInfo
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return bottomInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// 初始化默认选中
|
||||
this.$emit('monthSelected', this.selected)
|
||||
this.$nextTick(() => {
|
||||
// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
|
||||
// 因为nvue下，$nextTick并不是100%可靠的
|
||||
this.$uv.sleep(10).then(() => {
|
||||
this.getWrapperWidth()
|
||||
this.getMonthRect()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 判断两个日期是否相等
|
||||
dateSame(date1, date2) {
|
||||
return dayjs(date1).isSame(dayjs(date2))
|
||||
},
|
||||
// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
|
||||
getWrapperWidth() {
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['uv-calendar-month-wrapper'], res => {
|
||||
this.width = res.size.width
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect('.uv-calendar-month-wrapper').then(size => {
|
||||
this.width = size.width
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
getMonthRect() {
|
||||
// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
|
||||
const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
|
||||
`uv-calendar-month-${index}`))
|
||||
// 一次性返回
|
||||
Promise.all(promiseAllArr).then(
|
||||
sizes => {
|
||||
let height = 1
|
||||
const topArr = []
|
||||
for (let i = 0; i < this.months.length; i++) {
|
||||
// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份
|
||||
topArr[i] = height
|
||||
height += sizes[i].height
|
||||
}
|
||||
// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出
|
||||
this.$emit('updateMonthTop', topArr)
|
||||
})
|
||||
},
|
||||
// 获取每个月份区域的尺寸
|
||||
getMonthRectByPromise(el) {
|
||||
// #ifndef APP-NVUE
|
||||
// $uvGetRect为uvui自带的节点查询简化方法，详见文档介绍：https://www.uvui.cn/js/getRect.html
|
||||
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uvGetRect(`.${el}`).then(size => {
|
||||
resolve(size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，使用dom模块查询元素高度
|
||||
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(this.$refs[el][0], res => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 点击某一个日期
|
||||
clickHandler(index1, index2, item) {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
this.item = item
|
||||
const date = dayjs(item.date).format("YYYY-MM-DD")
|
||||
if (item.disabled) return
|
||||
// 对上一次选择的日期数组进行深度克隆
|
||||
let selected = this.$uv.deepClone(this.selected)
|
||||
if (this.mode === 'single') {
|
||||
// 单选情况下，让数组中的元素为当前点击的日期
|
||||
selected = [date]
|
||||
} else if (this.mode === 'multiple') {
|
||||
if (selected.some(item => this.dateSame(item, date))) {
|
||||
// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
|
||||
const itemIndex = selected.findIndex(item => dayjs(item).format("YYYY-MM-DD") === dayjs(date).format("YYYY-MM-DD"))
|
||||
selected.splice(itemIndex, 1)
|
||||
} else {
|
||||
// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去
|
||||
if (selected.length < this.maxCount) selected.push(date)
|
||||
}
|
||||
} else {
|
||||
// 选择区间形式
|
||||
if (selected.length === 0 || selected.length >= 2) {
|
||||
// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
|
||||
selected = [date]
|
||||
} else if (selected.length === 1) {
|
||||
// 如果已经选择了开始日期
|
||||
const existsDate = selected[0]
|
||||
// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
|
||||
if (dayjs(date).isBefore(existsDate)) {
|
||||
selected = [date]
|
||||
} else if (dayjs(date).isAfter(existsDate)) {
|
||||
// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
|
||||
if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
|
||||
if(this.rangePrompt) {
|
||||
this.$uv.toast(this.rangePrompt)
|
||||
} else {
|
||||
this.$uv.toast(`选择天数不能超过 ${this.maxRange} 天`)
|
||||
}
|
||||
return
|
||||
}
|
||||
// 如果当前日期大于已有日期，将当前的添加到数组尾部
|
||||
selected.push(date)
|
||||
const startDate = selected[0]
|
||||
const endDate = selected[1]
|
||||
const arr = []
|
||||
let i = 0
|
||||
do {
|
||||
// 将开始和结束日期之间的日期添加到数组中
|
||||
arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
|
||||
i++
|
||||
// 累加的日期小于结束日期时，继续下一次的循环
|
||||
} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
|
||||
// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
|
||||
arr.push(endDate)
|
||||
selected = arr
|
||||
} else {
|
||||
// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己
|
||||
if (selected[0] === date && !this.allowSameDay) return
|
||||
selected.push(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setSelected(selected)
|
||||
this.$emit('change',{
|
||||
day: date,
|
||||
selected: selected
|
||||
});
|
||||
},
|
||||
// 设置默认日期
|
||||
setDefaultDate() {
|
||||
if (!this.defaultDate) {
|
||||
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
|
||||
const selected = [dayjs().format("YYYY-MM-DD")]
|
||||
return this.setSelected(selected, false)
|
||||
}
|
||||
let defaultDate = []
|
||||
const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
|
||||
const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
|
||||
if (this.mode === 'single') {
|
||||
// 单选模式，可以是字符串或数组，Date对象等
|
||||
if (!this.$uv.test.array(this.defaultDate)) {
|
||||
defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
|
||||
} else {
|
||||
defaultDate = [this.defaultDate[0]]
|
||||
}
|
||||
} else {
|
||||
// 如果为非数组，则不执行
|
||||
if (!this.$uv.test.array(this.defaultDate)) return
|
||||
defaultDate = this.defaultDate
|
||||
}
|
||||
// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
|
||||
defaultDate = defaultDate.filter(item => {
|
||||
return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
|
||||
maxDate).add(1, 'day'))
|
||||
})
|
||||
this.setSelected(defaultDate, false)
|
||||
},
|
||||
setSelected(selected, event = true) {
|
||||
this.selected = selected
|
||||
event && this.$emit('monthSelected', this.selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-calendar-month-wrapper {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.uv-calendar-month {
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
line-height: 42px;
|
||||
height: 42px;
|
||||
color: $uv-main-color;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__days {
|
||||
position: relative;
|
||||
@include flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__month-mark-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
font-size: 155px;
|
||||
color: rgba(231, 232, 234, 0.83);
|
||||
}
|
||||
}
|
||||
|
||||
&__day {
|
||||
@include flex;
|
||||
padding: 2px;
|
||||
/* #ifndef APP-NVUE */
|
||||
// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
|
||||
width: calc(100% / 7);
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
|
||||
&__select {
|
||||
flex: 1;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&__dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 100px;
|
||||
background-color: $uv-error;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
&__top-info {
|
||||
color: $uv-content-color;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
&--selected {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: #cacbcd;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttom-info {
|
||||
color: $uv-content-color;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&--selected {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: #cacbcd;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
||||
&--selected {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: #cacbcd;
|
||||
}
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: $uv-primary;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&--range-selected {
|
||||
opacity: 0.3;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--range-start-selected {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&--range-end-selected {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
export default {
|
||||
props: {
|
||||
// 日历顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: '日期选择'
|
||||
},
|
||||
// 是否显示标题
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示副标题
|
||||
showSubtitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
// mode=range时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// mode=range时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 自定义列表
|
||||
customList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 主题色，对底部按钮和选中日期有效
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 最小的可选日期
|
||||
minDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 最大可选日期
|
||||
maxDate: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
defaultDate: {
|
||||
type: [Array, String, Date, null],
|
||||
default: null
|
||||
},
|
||||
// mode=multiple时，最多可选多少个日期
|
||||
maxCount: {
|
||||
type: [String, Number],
|
||||
default: Number.MAX_SAFE_INTEGER
|
||||
},
|
||||
// 日期行高
|
||||
rowHeight: {
|
||||
type: [String, Number],
|
||||
default: 56
|
||||
},
|
||||
// 日期格式化函数
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: null
|
||||
},
|
||||
// 是否显示农历
|
||||
showLunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示月份背景色
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 确定按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 确认按钮处于禁用状态时的文字
|
||||
confirmDisabledText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 是否允许点击遮罩关闭日历
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许点击确认按钮关闭日历
|
||||
closeOnClickConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否为只读状态，只读状态下禁止选择日期
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否展示确认按钮
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 日期区间最多可选天数，默认无限制，mode = range时有效 Infinity
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: Number.MAX_SAFE_INTEGER
|
||||
},
|
||||
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
rangePrompt: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||
showRangePrompt: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 圆角值
|
||||
round: {
|
||||
type: [Boolean, String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 最多展示月份数量
|
||||
monthNum: {
|
||||
type: [Number, String],
|
||||
default: 3
|
||||
},
|
||||
...uni.$uv?.props?.calendar
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<uv-popup
|
||||
ref="calendarPopup"
|
||||
mode="bottom"
|
||||
closeable
|
||||
:round="round"
|
||||
:closeOnClickOverlay="closeOnClickOverlay"
|
||||
@change="popupChange"
|
||||
>
|
||||
<view class="uv-calendar">
|
||||
<uvHeader
|
||||
:title="title"
|
||||
:subtitle="subtitle"
|
||||
:showSubtitle="showSubtitle"
|
||||
:showTitle="showTitle"
|
||||
></uvHeader>
|
||||
<scroll-view
|
||||
:style="{ height: $uv.addUnit(listHeight) }"
|
||||
scroll-y
|
||||
@scroll="onScroll"
|
||||
:scroll-top="scrollTop"
|
||||
:scrollIntoView="scrollIntoView"
|
||||
>
|
||||
<uvMonth
|
||||
:color="color"
|
||||
:rowHeight="rowHeight"
|
||||
:showMark="showMark"
|
||||
:months="months"
|
||||
:mode="mode"
|
||||
:maxCount="maxCount"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:defaultDate="defaultDate"
|
||||
:minDate="innerMinDate"
|
||||
:maxDate="innerMaxDate"
|
||||
:maxMonth="monthNum"
|
||||
:readonly="readonly"
|
||||
:maxRange="maxRange"
|
||||
:rangePrompt="rangePrompt"
|
||||
:showRangePrompt="showRangePrompt"
|
||||
:allowSameDay="allowSameDay"
|
||||
ref="month"
|
||||
@monthSelected="monthSelected"
|
||||
@updateMonthTop="updateMonthTop"
|
||||
@change="changeDay"
|
||||
></uvMonth>
|
||||
</scroll-view>
|
||||
<slot name="footer" v-if="showConfirm">
|
||||
<view class="uv-calendar__confirm" @click="dddd">
|
||||
<uv-button
|
||||
shape="circle"
|
||||
:text="buttonDisabled ? confirmDisabledText : confirmText"
|
||||
:color="color"
|
||||
@click="confirm"
|
||||
:disabled="buttonDisabled"
|
||||
></uv-button>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import uvHeader from './header.vue'
|
||||
import uvMonth from './month.vue'
|
||||
import props from './props.js'
|
||||
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
|
||||
import Calendar from './calendar.js'
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中.
|
||||
* @tutorial https://www.uvui.cn/components/calendar.html
|
||||
*
|
||||
* @property {String} title 标题内容 (默认 日期选择 )
|
||||
* @property {Boolean} showTitle 是否显示标题 (默认 true )
|
||||
* @property {Boolean} showSubtitle 是否显示副标题 (默认 true )
|
||||
* @property {String} mode 日期类型选择 single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' )
|
||||
* @property {String} startText mode=range时，第一个日期底部的提示文字 (默认 '开始' )
|
||||
* @property {String} endText mode=range时，最后一个日期底部的提示文字 (默认 '结束' )
|
||||
* @property {Array} customList 自定义列表
|
||||
* @property {String} color 主题色，对底部按钮和选中日期有效 (默认 ‘#3c9cff' )
|
||||
* @property {String | Number} minDate 最小的可选日期 (默认 0 )
|
||||
* @property {String | Number} maxDate 最大可选日期 (默认 0 )
|
||||
* @property {Array | String| Date} defaultDate 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||
* @property {String | Number} maxCount mode=multiple时，最多可选多少个日期 (默认 Number.MAX_SAFE_INTEGER )
|
||||
* @property {String | Number} rowHeight 日期行高 (默认 56 )
|
||||
* @property {Function} formatter 日期格式化函数
|
||||
* @property {Boolean} showLunar 是否显示农历 (默认 false )
|
||||
* @property {Boolean} showMark 是否显示月份背景色 (默认 true )
|
||||
* @property {String} confirmText 确定按钮的文字 (默认 '确定' )
|
||||
* @property {String} confirmDisabledText 确认按钮处于禁用状态时的文字 (默认 '确定' )
|
||||
* @property {Boolean} show 是否显示日历弹窗 (默认 false )
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭日历 (默认 false )
|
||||
* @property {Boolean} closeOnClickConfirm 是否允许点击确认按钮关闭日历，设置为false不影响confirm事件返回 (默认 true )
|
||||
* @property {Boolean} readonly 是否为只读状态，只读状态下禁止选择日期 (默认 false )
|
||||
* @property {String | Number} maxRange 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||
* @property {String} rangePrompt 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||
* @property {Boolean} showRangePrompt 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
|
||||
* @property {Boolean} allowSameDay 是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
|
||||
* @property {Number|String} round 圆角值，默认无圆角 (默认 0 )
|
||||
* @property {Number|String} monthNum 最多展示的月份数量 (默认 3 )
|
||||
*
|
||||
* @event {Function()} confirm 点击确定按钮时触发 选择日期相关的返回参数
|
||||
* @event {Function()} close 日历关闭时触发 可定义页面关闭时的回调事件
|
||||
* @example <uv-calendar ref="calendar" :defaultDate="defaultDateMultiple" mode="multiple" @confirm="confirm">
|
||||
</uv-calendar>
|
||||
* */
|
||||
export default {
|
||||
name: 'uv-calendar',
|
||||
emits:['confirm','close','change'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
components: {
|
||||
uvHeader,
|
||||
uvMonth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 需要显示的月份的数组
|
||||
months: [],
|
||||
// 在月份滚动区域中，当前视图中月份的index索引
|
||||
monthIndex: 0,
|
||||
// 月份滚动区域的高度
|
||||
listHeight: 0,
|
||||
// month组件中选择的日期数组
|
||||
selected: [],
|
||||
scrollIntoView: '',
|
||||
scrollTop:0,
|
||||
// 过滤处理方法
|
||||
innerFormatter: (value) => value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedChange: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setMonth()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
|
||||
innerMaxDate() {
|
||||
return this.$uv.test.number(this.maxDate)
|
||||
? Number(this.maxDate)
|
||||
: this.maxDate
|
||||
},
|
||||
innerMinDate() {
|
||||
return this.$uv.test.number(this.minDate)
|
||||
? Number(this.minDate)
|
||||
: this.minDate
|
||||
},
|
||||
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
|
||||
selectedChange() {
|
||||
return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
|
||||
},
|
||||
subtitle() {
|
||||
// 初始化时，this.months为空数组，所以需要特别判断处理
|
||||
if (this.months.length) {
|
||||
return `${this.months[this.monthIndex].year}年${
|
||||
this.months[this.monthIndex].month
|
||||
}月`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
buttonDisabled() {
|
||||
// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
|
||||
if (this.mode === 'range') {
|
||||
if (this.selected.length <= 1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.start = Date.now()
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
dddd() {
|
||||
console.log('===')
|
||||
},
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e
|
||||
},
|
||||
// 点击日期框触发
|
||||
changeDay(e) {
|
||||
this.$emit('change',e);
|
||||
},
|
||||
// month组件内部选择日期后，通过事件通知给父组件
|
||||
monthSelected(e) {
|
||||
this.selected = e
|
||||
if (!this.showConfirm) {
|
||||
// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
|
||||
if (
|
||||
this.mode === 'multiple' ||
|
||||
this.mode === 'single' ||
|
||||
(this.mode === 'range' && this.selected.length >= 2)
|
||||
) {
|
||||
this.$emit('confirm', this.selected)
|
||||
}
|
||||
}
|
||||
},
|
||||
init() {
|
||||
// 校验maxDate，不能小于minDate
|
||||
if (
|
||||
this.innerMaxDate &&
|
||||
this.innerMinDate &&
|
||||
new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
|
||||
) {
|
||||
return this.$uv.error('maxDate不能小于minDate')
|
||||
}
|
||||
// 滚动区域的高度
|
||||
this.listHeight = this.rowHeight * 5 + 30
|
||||
this.setMonth()
|
||||
},
|
||||
open() {
|
||||
this.setMonth()
|
||||
this.$refs.calendarPopup.open();
|
||||
},
|
||||
popupChange(e) {
|
||||
if(!e.show) {
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
// 点击确定按钮
|
||||
confirm() {
|
||||
if (!this.buttonDisabled) {
|
||||
this.$emit('confirm', this.selected)
|
||||
}
|
||||
if (this.closeOnClickConfirm) {
|
||||
this.$refs.calendarPopup.close();
|
||||
}
|
||||
},
|
||||
// 获得两个日期之间的月份数
|
||||
getMonths(minDate, maxDate) {
|
||||
const minYear = dayjs(minDate).year()
|
||||
const minMonth = dayjs(minDate).month() + 1
|
||||
const maxYear = dayjs(maxDate).year()
|
||||
const maxMonth = dayjs(maxDate).month() + 1
|
||||
return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
|
||||
},
|
||||
// 设置月份数据
|
||||
setMonth() {
|
||||
// 最小日期的毫秒数
|
||||
const minDate = this.innerMinDate || dayjs().valueOf()
|
||||
// 如果没有指定最大日期，则往后推3个月
|
||||
const maxDate =
|
||||
this.innerMaxDate ||
|
||||
dayjs(minDate)
|
||||
.add(this.monthNum - 1, 'month')
|
||||
.valueOf()
|
||||
// 最大最小月份之间的共有多少个月份，
|
||||
const months = this.$uv.range(
|
||||
1,
|
||||
this.monthNum,
|
||||
this.getMonths(minDate, maxDate)
|
||||
)
|
||||
// 先清空数组
|
||||
this.months = []
|
||||
for (let i = 0; i < months; i++) {
|
||||
this.months.push({
|
||||
date: new Array(
|
||||
dayjs(minDate).add(i, 'month').daysInMonth()
|
||||
)
|
||||
.fill(1)
|
||||
.map((item, index) => {
|
||||
// 日期，取值1-31
|
||||
let day = index + 1
|
||||
// 星期，0-6，0为周日
|
||||
const week = dayjs(minDate)
|
||||
.add(i, 'month')
|
||||
.date(day)
|
||||
.day()
|
||||
const date = dayjs(minDate)
|
||||
.add(i, 'month')
|
||||
.date(day)
|
||||
.format('YYYY-MM-DD')
|
||||
let topInfo = ''
|
||||
let bottomInfo = ''
|
||||
if (this.showLunar) {
|
||||
// 将日期转为农历格式
|
||||
const lunar = Calendar.solar2lunar(
|
||||
dayjs(date).year(),
|
||||
dayjs(date).month() + 1,
|
||||
dayjs(date).date()
|
||||
)
|
||||
bottomInfo = lunar.IDayCn
|
||||
}
|
||||
let config = {
|
||||
day,
|
||||
week,
|
||||
// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
|
||||
disabled:
|
||||
dayjs(date).isBefore(
|
||||
dayjs(minDate).format('YYYY-MM-DD')
|
||||
) ||
|
||||
dayjs(date).isAfter(
|
||||
dayjs(maxDate).format('YYYY-MM-DD')
|
||||
),
|
||||
// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
|
||||
date: new Date(date),
|
||||
topInfo,
|
||||
bottomInfo,
|
||||
dot: false,
|
||||
month:
|
||||
dayjs(minDate).add(i, 'month').month() + 1
|
||||
}
|
||||
const formatter =
|
||||
this.formatter || this.innerFormatter
|
||||
return formatter(config)
|
||||
}),
|
||||
// 当前所属的月份
|
||||
month: dayjs(minDate).add(i, 'month').month() + 1,
|
||||
// 当前年份
|
||||
year: dayjs(minDate).add(i, 'month').year()
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 滚动到默认设置的月份
|
||||
scrollIntoDefaultMonth(selected) {
|
||||
// 查询默认日期在可选列表的下标
|
||||
const _index = this.months.findIndex(({
|
||||
year,
|
||||
month
|
||||
}) => {
|
||||
month = this.$uv.padZero(month)
|
||||
return `${year}-${month}` === selected
|
||||
})
|
||||
if (_index !== -1) {
|
||||
// #ifndef MP-WEIXIN
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoView = `month-${_index}`
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.scrollTop = this.months[_index].top || 0;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// scroll-view滚动监听
|
||||
onScroll(event) {
|
||||
// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
|
||||
const scrollTop = Math.max(0, event.detail.scrollTop)
|
||||
// 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引
|
||||
for (let i = 0; i < this.months.length; i++) {
|
||||
if (scrollTop >= (this.months[i].top || this.listHeight)) {
|
||||
this.monthIndex = i
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新月份的top值
|
||||
updateMonthTop(topArr = []) {
|
||||
// 设置对应月份的top值，用于onScroll方法更新月份
|
||||
topArr.map((item, index) => {
|
||||
this.months[index].top = item
|
||||
})
|
||||
|
||||
// 获取默认日期的下标
|
||||
if (!this.defaultDate) {
|
||||
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
|
||||
const selected = dayjs().format("YYYY-MM")
|
||||
this.scrollIntoDefaultMonth(selected)
|
||||
return
|
||||
}
|
||||
let selected = dayjs().format("YYYY-MM");
|
||||
// 单选模式，可以是字符串或数组，Date对象等
|
||||
if (!this.$uv.test.array(this.defaultDate)) {
|
||||
selected = dayjs(this.defaultDate).format("YYYY-MM")
|
||||
} else {
|
||||
selected = dayjs(this.defaultDate[0]).format("YYYY-MM");
|
||||
}
|
||||
this.scrollIntoDefaultMonth(selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uv-calendar {
|
||||
padding-bottom: 20rpx;
|
||||
&__confirm {
|
||||
padding: 7px 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-calendar",
|
||||
"displayName": "uv-calendar 日历 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.6",
|
||||
"description": "日历组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中，灵活配置，功能齐全，兼容全端。强烈推荐使用最新版日历组件，在下方跳入。",
|
||||
"keywords": [
|
||||
"uv-calendar",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"calendar",
|
||||
"日历"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-button",
|
||||
"uv-popup"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
## Calendar 日历
|
||||
|
||||
> **组件名：uv-calendar**
|
||||
|
||||
此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。灵活配置，功能齐全，兼容全端。
|
||||
|
||||
## 温馨提示：该组件不再更新，强烈推荐使用最新版日历组件：[https://www.uvui.cn/components/calendars.html](https://www.uvui.cn/components/calendars.html)。基于 `uv-ui` 插件市场首款多功能日历组件，不仅可以查看、选择日期，还可以选择任意范围内的日期、打点操作、自定义主题颜色、自定义文案、农历显示等。追求的就是完美。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/calendar.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,40 @@
|
||||
## 1.0.15（2023-11-08）
|
||||
1. 增加readonly属性，是否为只读状态，只读状态下禁止选择日期
|
||||
## 1.0.14（2023-10-12）
|
||||
1. 修复selected没有设置了info或者info设置为空字符串后，文本则无法恢复BUG
|
||||
## 1.0.13（2023-09-19）
|
||||
1. 修复range模式下，selected设置了info后选中后，导致文本不恢复的问题
|
||||
2. 修复multiple模式下，selected自定义信息的颜色没变，依然是白色
|
||||
## 1.0.12（2023-09-14）
|
||||
1. 优化
|
||||
## 1.0.11（2023-09-14）
|
||||
1. 增加allowSameDay参数，是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
2. 修复在vue2+小程序渲染时闪烁的问题
|
||||
## 1.0.10（2023-09-07）
|
||||
1. 修复国际化失效的BUG
|
||||
## 1.0.9（2023-09-01）
|
||||
1. 修复在pages.json中设置easycom会报错的BUG
|
||||
## 1.0.8（2023-08-29）
|
||||
1. 修复mainjs中设置setConfig修改属性不生效的问题，出自评论区：https://ext.dcloud.net.cn/plugin?id=12287
|
||||
## 1.0.7（2023-08-26）
|
||||
1. 去除range参数，由mode="range"替换
|
||||
2. 新增mode参数，不传 / multiple / range，分别为单日期， 多个日期，选择日期范围
|
||||
3. 与uv-calendar选择日期的功能保持一致
|
||||
## 1.0.6（2023-08-25）
|
||||
1. 修复点击返回今天按钮时，monthSwitch方法回调参数返回月份不是当天对应月份：https://github.com/climblee/uv-ui/issues/7
|
||||
## 1.0.5（2023-08-13）
|
||||
1. 修复选择月份弹窗层级的问题
|
||||
## 1.0.4（2023-08-06）
|
||||
1. 优化
|
||||
## 1.0.3（2023-08-06）
|
||||
1. 修复高度不对的BUG
|
||||
2. 修复文案在小屏幕的BUG
|
||||
## 1.0.2（2023-08-05）
|
||||
1. 增加startText参数
|
||||
2. 增加endText参数
|
||||
3. 增加selected中的参数
|
||||
4. 优化日历范围选择
|
||||
## 1.0.1（2023-08-04）
|
||||
1. 修复 自定义主题时 颜色错误的BUG
|
||||
## 1.0.0（2023-08-03）
|
||||
1. 新增 uv-calendars 新版日历发布
|
||||
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<view class="uv-calendar-body">
|
||||
<view class="uv-calendar__header">
|
||||
<view class="uv-calendar__header-btn-box" @click.stop="pre">
|
||||
<view class="uv-calendar__header-btn uv-calendar--left"></view>
|
||||
</view>
|
||||
<picker mode="date" :value="getDate" fields="month" @change="bindDateChange">
|
||||
<text class="uv-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
|
||||
</picker>
|
||||
<view class="uv-calendar__header-btn-box" @click.stop="next">
|
||||
<view class="uv-calendar__header-btn uv-calendar--right"></view>
|
||||
</view>
|
||||
<text class="uv-calendar__backtoday" @click="backToday">{{todayText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__box">
|
||||
<view v-if="showMonth" class="uv-calendar__box-bg">
|
||||
<text class="uv-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks uv-calendar__weeks-week">
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{SUNText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{monText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{TUEText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{WEDText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{THUText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{FRIText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{SATText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uv-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<calendar-item class="uv-calendar-item--hook" :weeks="weeks" :rangeInfoText="rangeInfoText(weeks)" :multiple="multiple" :range="range" :calendar="calendar" :selected="selected" :lunar="lunar" :color="color" @change="choiceDate"></calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
|
||||
import CalendarItem from './calendar-item.vue';
|
||||
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n';
|
||||
import i18nMessages from './i18n/index.js';
|
||||
const { t } = initVueI18n(i18nMessages);
|
||||
export default {
|
||||
mixins: [mpMixin, mixin],
|
||||
components: {
|
||||
CalendarItem
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: [String,Array],
|
||||
default: ''
|
||||
},
|
||||
nowDate: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
weeks: {
|
||||
type: [Array, Object],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDate() {
|
||||
return Array.isArray(this.date) ? this.date[0] : this.date;
|
||||
},
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
todayText() {
|
||||
return t("uv-calender.today")
|
||||
},
|
||||
monText() {
|
||||
return t("uv-calender.MON")
|
||||
},
|
||||
TUEText() {
|
||||
return t("uv-calender.TUE")
|
||||
},
|
||||
WEDText() {
|
||||
return t("uv-calender.WED")
|
||||
},
|
||||
THUText() {
|
||||
return t("uv-calender.THU")
|
||||
},
|
||||
FRIText() {
|
||||
return t("uv-calender.FRI")
|
||||
},
|
||||
SATText() {
|
||||
return t("uv-calender.SAT")
|
||||
},
|
||||
SUNText() {
|
||||
return t("uv-calender.SUN")
|
||||
},
|
||||
rangeInfoText(weeks) {
|
||||
return weeks=> {
|
||||
if(this.allowSameDay && weeks.beforeRange && weeks.afterRange && weeks.dateEqual) {
|
||||
return this.setInfo(weeks,`${this.startText}/${this.endText}`);
|
||||
}
|
||||
if(weeks.beforeRange) {
|
||||
return this.setInfo(weeks,this.startText);
|
||||
}
|
||||
if(weeks.afterRange) {
|
||||
return this.setInfo(weeks,this.endText);
|
||||
}
|
||||
if(weeks.extraInfo?.info_old == ' ') {
|
||||
weeks.extraInfo.info = null;
|
||||
}else if(weeks.extraInfo?.info_old) {
|
||||
weeks.extraInfo.info = weeks.extraInfo.info_old;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setInfo(weeks,text) {
|
||||
this.setInfoOld(weeks);
|
||||
if(weeks.extraInfo) {
|
||||
weeks.extraInfo.info = text;
|
||||
}else {
|
||||
weeks.extraInfo = {
|
||||
info: text
|
||||
}
|
||||
}
|
||||
},
|
||||
setInfoOld(weeks) {
|
||||
if(weeks.extraInfo) {
|
||||
weeks.extraInfo.info_old = weeks.extraInfo.info ? weeks.extraInfo.info_old || weeks.extraInfo.info : ' ';
|
||||
}
|
||||
},
|
||||
bindDateChange(e) {
|
||||
this.$emit('bindDateChange', e);
|
||||
},
|
||||
backToday() {
|
||||
this.$emit('backToday');
|
||||
},
|
||||
pre() {
|
||||
this.$emit('pre');
|
||||
},
|
||||
next() {
|
||||
this.$emit('next');
|
||||
},
|
||||
choiceDate(e) {
|
||||
this.$emit('choiceDate', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
$uv-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
$uv-border-color: #EDEDED !default;
|
||||
$uv-text-color: #333;
|
||||
$uv-bg-color-hover: #f1f1f1;
|
||||
$uv-font-size-base: 14px;
|
||||
$uv-text-color-placeholder: #808080;
|
||||
$uv-color-subtitle: #555555;
|
||||
$uv-text-color-grey: #999;
|
||||
.uv-calendar {
|
||||
@include flex(column);
|
||||
}
|
||||
.uv-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $uv-bg-color-mask;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
.uv-calendar--fixed {
|
||||
position: fixed;
|
||||
/* #ifdef APP-NVUE */
|
||||
bottom: 0;
|
||||
/* #endif */
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
bottom: calc(var(--window-bottom));
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.uv-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
.uv-calendar__header {
|
||||
position: relative;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom-color: $uv-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uv-calendar--fixed-top {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
border-top-color: $uv-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.uv-calendar--fixed-width {
|
||||
width: 50px;
|
||||
}
|
||||
.uv-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: $uv-text-color;
|
||||
background-color: $uv-bg-color-hover;
|
||||
}
|
||||
.uv-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: $uv-font-size-base;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar__header-btn-box {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.uv-calendar__header-btn {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left-color: $uv-text-color-placeholder;
|
||||
border-left-style: solid;
|
||||
border-left-width: 2px;
|
||||
border-top-color: $uv-color-subtitle;
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
.uv-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.uv-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
.uv-calendar__weeks {
|
||||
position: relative;
|
||||
@include flex;
|
||||
}
|
||||
.uv-calendar__weeks-week {
|
||||
padding: 0 0 2rpx;
|
||||
}
|
||||
.uv-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
.uv-calendar__weeks-day {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uv-calendar__weeks-day-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
.uv-calendar__box {
|
||||
position: relative;
|
||||
}
|
||||
.uv-calendar__box-bg {
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.uv-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: $uv-text-color-grey;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view class="uv-calendar-item__weeks-box" :class="{
|
||||
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable),
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple) ,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple
|
||||
}" :style="[itemBoxStyle]" @click="choiceDate(weeks)">
|
||||
<view class="uv-calendar-item__weeks-box-item">
|
||||
<text v-if="selected&&weeks.extraInfo&&weeks.extraInfo.badge" class="uv-calendar-item__weeks-box-circle"></text>
|
||||
<text class="uv-calendar-item__weeks-top-text" v-if="weeks.extraInfo&&weeks.extraInfo.topinfo" :style="[infoStyle('top')]">{{weeks.extraInfo&&weeks.extraInfo.topinfo}}</text>
|
||||
<text class="uv-calendar-item__weeks-box-text" :class="{
|
||||
'uv-calendar-item--isDay-text': weeks.isDay,
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple,
|
||||
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable)
|
||||
}" :style="[itemBoxStyle]">{{weeks.date}}</text>
|
||||
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uv-calendar-item__weeks-lunar-text" :class="{
|
||||
'uv-calendar-item--isDay-text':weeks.isDay,
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple
|
||||
}" :style="[itemBoxStyle]">{{todayText}}</text>
|
||||
<text v-if="lunar&&!weeks.extraInfo" class="uv-calendar-item__weeks-lunar-text" :class="{
|
||||
'uv-calendar-item--isDay-text':weeks.isDay,
|
||||
'uv-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked':weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked':weeks.afterRange,
|
||||
'uv-calendar-item--multiple':weeks.multiple,
|
||||
'uv-calendar-item--disable':weeks.disable || (weeks.extraInfo&&weeks.extraInfo.disable)
|
||||
}" :style="[itemBoxStyle]">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
|
||||
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uv-calendar-item__weeks-lunar-text" :class="{
|
||||
'uv-calendar-item__weeks-lunar-text--equal': weeks.dateEqual
|
||||
}" :style="[infoStyle('bottom')]">{{weeks.extraInfo.info}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js';
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
export default {
|
||||
emits: ['change'],
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
todayText() {
|
||||
return t("uv-calender.today")
|
||||
},
|
||||
itemBoxStyle() {
|
||||
const style = {};
|
||||
if (this.multiple) { // 多选状态
|
||||
if (this.weeks.multiple) {
|
||||
style.backgroundColor = this.color;
|
||||
style.color = '#fff';
|
||||
} else if (this.weeks.isDay) {
|
||||
style.color = this.color;
|
||||
}
|
||||
} else if (this.range) { // 范围选择
|
||||
if (this.weeks.beforeRange || this.weeks.afterRange) {
|
||||
style.backgroundColor = this.color;
|
||||
} else if (this.weeks.range) {
|
||||
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||
style.color = this.color;
|
||||
style.opacity = 0.8;
|
||||
style.borderRadius = 0;
|
||||
}
|
||||
} else {
|
||||
if (this.weeks.isDay) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if (this.calendar.fullDate === this.weeks.fullDate) {
|
||||
style.backgroundColor = this.color;
|
||||
style.color = '#fff';
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
infoStyle(val) {
|
||||
return val => {
|
||||
const style = {};
|
||||
if (!this.weeks.multiple) {
|
||||
if (val == 'top') {
|
||||
style.color = this.weeks.extraInfo.topinfoColor ? this.weeks.extraInfo.topinfoColor : '#606266';
|
||||
} else if (val == 'bottom') {
|
||||
style.color = this.weeks.extraInfo.infoColor ? this.weeks.extraInfo.infoColor : '#f56c6c';
|
||||
}
|
||||
if (this.weeks.range) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if (this.calendar.fullDate === this.weeks.fullDate || this.weeks.beforeRange || this.weeks.afterRange) {
|
||||
style.color = this.multiple ? style.color : '#fff';
|
||||
}
|
||||
} else {
|
||||
style.color = '#fff';
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
if (this.weeks.extraInfo && this.weeks.extraInfo.disable) return;
|
||||
this.$emit('change', weeks)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
$uv-font-size-base: 14px;
|
||||
$uv-text-color: #333;
|
||||
$uv-font-size-sm: 24rpx;
|
||||
$uv-error: #f56c6c !default;
|
||||
$uv-opacity-disabled: 0.3;
|
||||
$uv-text-color-disable: #c0c0c0;
|
||||
$uv-primary: #3c9cff !default;
|
||||
$info-height: 32rpx;
|
||||
.uv-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.uv-calendar-item__weeks-top-text {
|
||||
height: $info-height;
|
||||
line-height: $info-height;
|
||||
font-size: $uv-font-size-sm;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-text {
|
||||
font-size: $uv-font-size-base;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar-item__weeks-lunar-text {
|
||||
height: $info-height;
|
||||
line-height: $info-height;
|
||||
font-size: $uv-font-size-sm;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar-item__weeks-lunar-text--equal {
|
||||
/* #ifdef H5 */
|
||||
white-space: nowrap;
|
||||
transform: scale(.8);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
font-size: 20rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 106rpx;
|
||||
height: 56px;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $uv-error;
|
||||
}
|
||||
.uv-calendar-item--disable {
|
||||
background-color: rgba(249, 249, 249, $uv-opacity-disabled);
|
||||
color: $uv-text-color-disable;
|
||||
}
|
||||
.uv-calendar-item--isDay-text {
|
||||
color: $uv-primary;
|
||||
}
|
||||
.uv-calendar-item--isDay {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--checked {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .uv-calendar-item--range {
|
||||
// background-color: $uv-primary;
|
||||
// color: #fff;
|
||||
// }
|
||||
.uv-calendar-item--before-checked {
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--after-checked {
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--multiple {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,546 @@
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @github https://github.com/jjonline/calendar.js
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||
* @Version 1.0.3
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||
/** Add By JJonline@JJonline.Cn**/
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||
0x0d520], // 2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function (y) {
|
||||
var i; var sum = 348
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||
return (sum + this.leapDays(y))
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||
return (this.lunarInfo[y - 1900] & 0xf)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function (y) {
|
||||
if (this.leapMonth(y)) {
|
||||
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||
}
|
||||
return (0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var ms = m - 1
|
||||
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||
} else {
|
||||
return (this.solarMonth[ms])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function (lYear) {
|
||||
var ganKey = (lYear - 3) % 10
|
||||
var zhiKey = (lYear - 3) % 12
|
||||
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function (cMonth, cDay) {
|
||||
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function (offset) {
|
||||
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function (y, n) {
|
||||
if (y < 1900 || y > 2100) { return -1 }
|
||||
if (n < 1 || n > 24) { return -1 }
|
||||
var _table = this.sTermInfo[y - 1900]
|
||||
var _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
]
|
||||
var _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2)
|
||||
]
|
||||
return parseInt(_calday[n - 1])
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function (m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var s = this.nStr3[m - 1]
|
||||
s += '\u6708'// 加上月字
|
||||
return s
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function (d) { // 日 => \u65e5
|
||||
var s
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break
|
||||
break
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break
|
||||
break
|
||||
default :
|
||||
s = this.nStr2[Math.floor(d / 10)]
|
||||
s += this.nStr1[d % 10]
|
||||
}
|
||||
return (s)
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function (y) {
|
||||
return this.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||
// 年份限定、上限
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1// undefined转换为数字变为NaN
|
||||
}
|
||||
// 公历传参最下限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1
|
||||
}
|
||||
// 未传参 获得当天
|
||||
if (!y) {
|
||||
var objDate = new Date()
|
||||
} else {
|
||||
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
var i; var leap = 0; var temp = 0
|
||||
// 修正ymd参数
|
||||
var y = objDate.getFullYear()
|
||||
var m = objDate.getMonth() + 1
|
||||
var d = objDate.getDate()
|
||||
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = this.lYearDays(i)
|
||||
offset -= temp
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; i--
|
||||
}
|
||||
|
||||
// 是否今天
|
||||
var isTodayObj = new Date()
|
||||
var isToday = false
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true
|
||||
}
|
||||
// 星期几
|
||||
var nWeek = objDate.getDay()
|
||||
var cWeek = this.nStr1[nWeek]
|
||||
// 数字表示周几顺应天朝周一开始的惯例
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7
|
||||
}
|
||||
// 农历年
|
||||
var year = i
|
||||
var leap = this.leapMonth(i) // 闰哪个月
|
||||
var isLeap = false
|
||||
|
||||
// 效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
// 闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i
|
||||
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||
} else {
|
||||
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||
}
|
||||
// 解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||
offset -= temp
|
||||
}
|
||||
// 闰月导致数组下标重叠取反
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||
if (isLeap) {
|
||||
isLeap = false
|
||||
} else {
|
||||
isLeap = true; --i
|
||||
}
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i
|
||||
}
|
||||
// 农历月
|
||||
var month = i
|
||||
// 农历日
|
||||
var day = offset + 1
|
||||
// 天干地支处理
|
||||
var sm = m - 1
|
||||
var gzY = this.toGanZhiYear(year)
|
||||
|
||||
// 当月的两个节气
|
||||
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||
|
||||
// 依据12节气修正干支月
|
||||
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||
if (d >= firstNode) {
|
||||
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||
}
|
||||
|
||||
// 传入的日期的节气与否
|
||||
var isTerm = false
|
||||
var Term = null
|
||||
if (firstNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 2]
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 1]
|
||||
}
|
||||
// 日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||
// 该日期所属的星座
|
||||
var astro = this.toAstro(m, d)
|
||||
|
||||
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth
|
||||
var leapOffset = 0
|
||||
var leapMonth = this.leapMonth(y)
|
||||
var leapDay = this.leapDays(y)
|
||||
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||
var day = this.monthDays(y, m)
|
||||
var _day = day
|
||||
// bugFix 2016-9-25
|
||||
// if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = this.leapDays(y, m)
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||
|
||||
// 计算农历的时间差
|
||||
var offset = 0
|
||||
for (var i = 1900; i < y; i++) {
|
||||
offset += this.lYearDays(i)
|
||||
}
|
||||
var leap = 0; var isAdd = false
|
||||
for (var i = 1; i < m; i++) {
|
||||
leap = this.leapMonth(y)
|
||||
if (!isAdd) { // 处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += this.leapDays(y); isAdd = true
|
||||
}
|
||||
}
|
||||
offset += this.monthDays(y, i)
|
||||
}
|
||||
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) { offset += day }
|
||||
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||
var cY = calObj.getUTCFullYear()
|
||||
var cM = calObj.getUTCMonth() + 1
|
||||
var cD = calObj.getUTCDate()
|
||||
|
||||
return this.solar2lunar(cY, cM, cD)
|
||||
}
|
||||
}
|
||||
|
||||
export default calendar
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"uv-calender.ok": "ok",
|
||||
"uv-calender.cancel": "cancel",
|
||||
"uv-calender.today": "today",
|
||||
"uv-calender.MON": "MON",
|
||||
"uv-calender.TUE": "TUE",
|
||||
"uv-calender.WED": "WED",
|
||||
"uv-calender.THU": "THU",
|
||||
"uv-calender.FRI": "FRI",
|
||||
"uv-calender.SAT": "SAT",
|
||||
"uv-calender.SUN": "SUN"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"uv-calender.ok": "确定",
|
||||
"uv-calender.cancel": "取消",
|
||||
"uv-calender.today": "今日",
|
||||
"uv-calender.SUN": "日",
|
||||
"uv-calender.MON": "一",
|
||||
"uv-calender.TUE": "二",
|
||||
"uv-calender.WED": "三",
|
||||
"uv-calender.THU": "四",
|
||||
"uv-calender.FRI": "五",
|
||||
"uv-calender.SAT": "六"
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"uv-calender.ok": "確定",
|
||||
"uv-calender.cancel": "取消",
|
||||
"uv-calender.today": "今日",
|
||||
"uv-calender.SUN": "日",
|
||||
"uv-calender.MON": "一",
|
||||
"uv-calender.TUE": "二",
|
||||
"uv-calender.WED": "三",
|
||||
"uv-calender.THU": "四",
|
||||
"uv-calender.FRI": "五",
|
||||
"uv-calender.SAT": "六"
|
||||
}
|
||||
@@ -0,0 +1,435 @@
|
||||
import CALENDAR from './calendar.js'
|
||||
class Calendar {
|
||||
constructor({
|
||||
date,
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
multiple,
|
||||
allowSameDay
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDate(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
this.range = range
|
||||
this.multiple = multiple
|
||||
this.allowSameDay = allowSameDay
|
||||
// 多选状态
|
||||
this.cleanRangeStatus()
|
||||
// 范围状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
// this._getWeek(this.date.fullDate)
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date, status) {
|
||||
if (this.range && status == 'init') {
|
||||
this.cleanRangeStatus();
|
||||
if (Array.isArray(date)) {
|
||||
this.rangeStatus.before = date[0];
|
||||
this.rangeStatus.after = date.length > 1 ? date[date.length - 1] : '';
|
||||
if (this.rangeStatus.after && this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after)
|
||||
}
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this.rangeStatus.before = this.selectDate.fullDate;
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
} else if (this.multiple && status == 'init') {
|
||||
this.cleanMultipleStatus();
|
||||
if (Array.isArray(date)) {
|
||||
this.multipleStatus.data = date;
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this.multipleStatus.data = [this.selectDate.fullDate];
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(date)) {
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanRangeStatus() {
|
||||
this.rangeStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 重置开始日期
|
||||
*/
|
||||
resetSatrtDate(startDate) {
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
}
|
||||
/**
|
||||
* 重置结束日期
|
||||
*/
|
||||
resetEndDate(endDate) {
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
}
|
||||
/**
|
||||
* 获取任意时间
|
||||
*/
|
||||
getDate(date, AddDayCount = 0, str = 'day') {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
if (typeof date !== 'object') {
|
||||
date = date.replace(/-/g, '/')
|
||||
}
|
||||
const dd = new Date(date)
|
||||
switch (str) {
|
||||
case 'day':
|
||||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
case 'month':
|
||||
if (dd.getDate() === 31 && AddDayCount > 0) {
|
||||
dd.setDate(dd.getDate() + AddDayCount)
|
||||
} else {
|
||||
const preMonth = dd.getMonth()
|
||||
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
|
||||
const nextMonth = dd.getMonth()
|
||||
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||
if (AddDayCount < 0 && preMonth !== 0 && nextMonth - preMonth > AddDayCount) {
|
||||
dd.setMonth(nextMonth + (nextMonth - preMonth + AddDayCount))
|
||||
}
|
||||
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||
if (AddDayCount > 0 && nextMonth - preMonth > AddDayCount) {
|
||||
dd.setMonth(nextMonth - (nextMonth - preMonth - AddDayCount))
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'year':
|
||||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
}
|
||||
const y = dd.getFullYear()
|
||||
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
||||
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||||
return {
|
||||
fullDate: y + '-' + m + '-' + d,
|
||||
year: y,
|
||||
month: m,
|
||||
date: d,
|
||||
day: dd.getDay()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取上月剩余天数
|
||||
*/
|
||||
_getLastMonthDays(firstDay, full) {
|
||||
let dateArr = []
|
||||
for (let i = firstDay; i > 0; i--) {
|
||||
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
||||
dateArr.push({
|
||||
date: beforeDate,
|
||||
month: full.month - 1,
|
||||
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取本月天数
|
||||
*/
|
||||
_currentMonthDys(dateData, full) {
|
||||
let dateArr = []
|
||||
let fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= dateData; i++) {
|
||||
let nowDate = full.year + '-' + (full.month < 10 ? full.month : full.month) + '-' + (i < 10 ? '0' + i : i)
|
||||
// 是否今天
|
||||
let isDay = fullDate === nowDate
|
||||
// 获取打点信息
|
||||
let info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(nowDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
||||
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
||||
disableBefore = this.dateCompare(this.startDate, nowDate)
|
||||
}
|
||||
if (this.endDate) {
|
||||
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
||||
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
||||
disableAfter = this.dateCompare(nowDate, this.endDate)
|
||||
}
|
||||
let ranges = this.rangeStatus.data
|
||||
let checked = false
|
||||
let rangesStatus = -1
|
||||
if (this.range) {
|
||||
if (ranges) {
|
||||
rangesStatus = ranges.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (rangesStatus !== -1) {
|
||||
checked = true
|
||||
}
|
||||
}
|
||||
let multiples = this.multipleStatus.data
|
||||
let checked_multiple = false
|
||||
let multiplesStatus = -1
|
||||
if (this.multiple) {
|
||||
if (multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (multiplesStatus !== -1) {
|
||||
checked_multiple = true
|
||||
}
|
||||
}
|
||||
let data = {
|
||||
fullDate: nowDate,
|
||||
year: full.year,
|
||||
date: i,
|
||||
range: this.range ? checked : false,
|
||||
multiple: this.multiple ? checked_multiple : false,
|
||||
beforeRange: this.dateEqual(this.rangeStatus.before, nowDate),
|
||||
afterRange: this.dateEqual(this.rangeStatus.after, nowDate),
|
||||
dateEqual: this.range && checked && this.dateEqual(this.rangeStatus.before, this.rangeStatus.after),
|
||||
month: full.month,
|
||||
lunar: this.getlunar(full.year, full.month, i),
|
||||
disable: !(disableBefore && disableAfter),
|
||||
isDay
|
||||
}
|
||||
if (info) {
|
||||
data.extraInfo = info
|
||||
}
|
||||
dateArr.push(data)
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取下月天数
|
||||
*/
|
||||
_getNextMonthDays(surplus, full) {
|
||||
let dateArr = []
|
||||
for (let i = 1; i < surplus + 1; i++) {
|
||||
dateArr.push({
|
||||
date: i,
|
||||
month: Number(full.month) + 1,
|
||||
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
} else if (Array.isArray(date)) {
|
||||
date = date[0]
|
||||
}
|
||||
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
||||
return dateInfo
|
||||
}
|
||||
/**
|
||||
* 比较时间大小
|
||||
*/
|
||||
dateCompare(startDate, endDate) {
|
||||
// 计算截止时间
|
||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||
if (startDate <= endDate) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (before.getTime() - after.getTime() === 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 比较after时间是否大于before时间
|
||||
*/
|
||||
dateAfterLgBefore(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (after.getTime() - before.getTime() > 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
/**
|
||||
* 计算阴历日期显示
|
||||
*/
|
||||
getlunar(year, month, date) {
|
||||
return CALENDAR.solar2lunar(year, month, date)
|
||||
}
|
||||
/**
|
||||
* 设置打点
|
||||
*/
|
||||
setSelectInfo(data, value) {
|
||||
this.selected = value
|
||||
this._getWeek(data)
|
||||
}
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.multiple) return
|
||||
let multiples = this.multipleStatus.data;
|
||||
const findIndex = multiples.findIndex(item => this.dateEqual(fullDate, item));
|
||||
if (findIndex < 0) {
|
||||
this.multipleStatus.data = this.multipleStatus.data.concat([fullDate]);
|
||||
} else {
|
||||
this.multipleStatus.data.splice(findIndex, 1);
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
/**
|
||||
* 获取范围状态
|
||||
*/
|
||||
setRange(fullDate) {
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.rangeStatus
|
||||
if (!this.range) return
|
||||
if (before && after) {
|
||||
this.cleanRangeStatus();
|
||||
this.rangeStatus.before = fullDate
|
||||
} else {
|
||||
if (!before) {
|
||||
this.rangeStatus.before = fullDate
|
||||
} else {
|
||||
if (this.allowSameDay && this.dateEqual(before, fullDate)) {
|
||||
this.rangeStatus.after = fullDate
|
||||
} else if (!this.dateAfterLgBefore(this.rangeStatus.before, fullDate)) {
|
||||
this.cleanRangeStatus();
|
||||
this.rangeStatus.before = fullDate
|
||||
this._getWeek(fullDate)
|
||||
return;
|
||||
}
|
||||
this.rangeStatus.after = fullDate
|
||||
if (this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after);
|
||||
} else {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.after, this.rangeStatus.before);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
_getWeek(dateData) {
|
||||
const {
|
||||
year,
|
||||
month
|
||||
} = this.getDate(dateData)
|
||||
let firstDay = new Date(year, month - 1, 1).getDay()
|
||||
let currentDay = new Date(year, month, 0).getDate()
|
||||
let dates = {
|
||||
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
||||
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
||||
nextMonthDays: [], // 下个月开始几天
|
||||
weeks: []
|
||||
}
|
||||
let canlender = []
|
||||
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
||||
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
||||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||||
let weeks = {}
|
||||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||||
for (let i = 0; i < canlender.length; i++) {
|
||||
if (i % 7 === 0) {
|
||||
weeks[parseInt(i / 7)] = new Array(7)
|
||||
}
|
||||
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||||
}
|
||||
this.canlender = canlender
|
||||
this.weeks = weeks
|
||||
}
|
||||
//静态方法
|
||||
// static init(date) {
|
||||
// if (!this.instance) {
|
||||
// this.instance = new Calendar(date);
|
||||
// }
|
||||
// return this.instance;
|
||||
// }
|
||||
}
|
||||
export default Calendar
|
||||
@@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<view class="uv-calendar">
|
||||
<view class="uv-calendar__content" v-if="insert">
|
||||
<calendar-body
|
||||
:date="date"
|
||||
:nowDate="nowDate"
|
||||
:weeks="weeks"
|
||||
:calendar="calendar"
|
||||
:selected="selected"
|
||||
:lunar="lunar"
|
||||
:showMonth="showMonth"
|
||||
:color="color"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:range="range"
|
||||
:multiple="multiple"
|
||||
:allowSameDay="allowSameDay"
|
||||
@bindDateChange="bindDateChange"
|
||||
@pre="pre"
|
||||
@next="next"
|
||||
@backToday="backToday"
|
||||
@choiceDate="choiceDate"
|
||||
></calendar-body>
|
||||
</view>
|
||||
<uv-popup ref="popup" mode="bottom" v-else :round="round" z-index="998" :close-on-click-overlay="closeOnClickOverlay" @maskClick="maskClick">
|
||||
<view style="min-height: 100px;">
|
||||
<uv-toolbar
|
||||
:show="true"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="getConfirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="close"
|
||||
@confirm="confirm"></uv-toolbar>
|
||||
<view class="line"></view>
|
||||
<calendar-body
|
||||
:nowDate="nowDate"
|
||||
:weeks="weeks"
|
||||
:calendar="calendar"
|
||||
:selected="selected"
|
||||
:lunar="lunar"
|
||||
:showMonth="showMonth"
|
||||
:color="color"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:range="range"
|
||||
:multiple="multiple"
|
||||
:allowSameDay="allowSameDay"
|
||||
@bindDateChange="bindDateChange"
|
||||
@pre="pre"
|
||||
@next="next"
|
||||
@backToday="backToday"
|
||||
@choiceDate="choiceDate"
|
||||
></calendar-body>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-calendar
|
||||
* @property {String} date 自定义当前时间，默认为今天
|
||||
* @property {Boolean} lunar 显示农历
|
||||
* @property {String} startDate 日期选择范围-开始日期
|
||||
* @property {String} endDate 日期选择范围-结束日期
|
||||
* @property {String} mode = [不传 | multiple | range ] 多个日期 | 选择日期范围 默认单日期
|
||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||
* @value true 弹窗模式
|
||||
* @value false 插入模式
|
||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||
* @property {String} cancelColor 取消按钮颜色
|
||||
* @property {String} confirmColor 确认按钮颜色，默认#3c9cff
|
||||
* @property {String} title 头部工具条中间的标题文字
|
||||
* @property {String} color 主题色，默认#3c9cff
|
||||
* @property {Number} round :insert="false"时的圆角
|
||||
* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭
|
||||
* @property {String} startText range为true时，第一个日期底部的提示文字
|
||||
* @property {String} endText range为true时，最后一个日期底部的提示文字
|
||||
* @property {String} readonly 是否为只读状态，只读状态下禁止选择日期，默认false
|
||||
*
|
||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||
* @event {Function} monthSwitch 切换月份时触发
|
||||
*
|
||||
* @example <uv-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||
*/
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
|
||||
import Calendar from './util.js';
|
||||
import calendarBody from './calendar-body.vue';
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n';
|
||||
import i18nMessages from './i18n/index.js';
|
||||
const { t } = initVueI18n(i18nMessages);
|
||||
export default {
|
||||
components: {
|
||||
calendarBody
|
||||
},
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['close', 'confirm', 'change', 'monthSwitch'],
|
||||
props: {
|
||||
// 取消按钮颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 确认按钮颜色，range模式下未选全显示灰色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 默认显示日期
|
||||
date: {
|
||||
type: [String,Array],
|
||||
default: ''
|
||||
},
|
||||
// 打点等设置
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否显示农历
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 可选择的起始日期
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 可选择的结束日期
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// multiple - 选择多日期 range - 选择日期范围
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否插入模式
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示月份为背景
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹窗模式是否清空上次选择内容
|
||||
clearDate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹窗圆角
|
||||
round: {
|
||||
type: [Number,String],
|
||||
default: 8
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// range为true时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// range为true时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.calendars
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: '',
|
||||
allowConfirm: false,
|
||||
multiple: false,
|
||||
range: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
confirmText() {
|
||||
return t("uv-calender.ok")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uv-calender.cancel")
|
||||
},
|
||||
getConfirmColor() {
|
||||
if(this.range || this.multiple || this.readonly) {
|
||||
return this.allowConfirm? this.confirmColor: '#999'
|
||||
}else {
|
||||
return this.confirmColor;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
date(newVal) {
|
||||
this.init(newVal)
|
||||
},
|
||||
startDate(val) {
|
||||
this.cale.resetSatrtDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
endDate(val) {
|
||||
this.cale.resetEndDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
selected(newVal) {
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setMode();
|
||||
this.cale = new Calendar({
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
multiple: this.multiple,
|
||||
allowSameDay: this.allowSameDay
|
||||
})
|
||||
this.init(this.date)
|
||||
},
|
||||
methods: {
|
||||
setMode() {
|
||||
switch (this.mode){
|
||||
case 'range':
|
||||
this.range = true;
|
||||
break;
|
||||
case 'multiple':
|
||||
this.multiple = true;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
async open() {
|
||||
if (this.clearDate && !this.insert) {
|
||||
this.cale.cleanRangeStatus()
|
||||
this.init(this.date)
|
||||
}
|
||||
if(!this.insert){
|
||||
this.$refs.popup.open();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close();
|
||||
this.$emit('close');
|
||||
},
|
||||
confirm() {
|
||||
if(this.readonly) {
|
||||
return;
|
||||
} else if(this.range && !this.cale.rangeStatus.after) {
|
||||
return;
|
||||
} else if(this.multiple && this.cale.multipleStatus.data.length == 0){
|
||||
return;
|
||||
}
|
||||
this.setEmit('confirm');
|
||||
this.close()
|
||||
},
|
||||
maskClick() {
|
||||
if(this.closeOnClickOverlay) {
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
bindDateChange(e) {
|
||||
const value = e.detail.value + '-1'
|
||||
this.setDate(value)
|
||||
|
||||
const { year, month } = this.cale.getDate(value)
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化日期显示
|
||||
* @param {Object} date
|
||||
*/
|
||||
init(date) {
|
||||
if(this.range) {
|
||||
// 重置范围选择状态
|
||||
this.cale.cleanRangeStatus();
|
||||
}else if(this.multiple){
|
||||
// 重置多选状态
|
||||
this.cale.cleanMultipleStatus();
|
||||
}
|
||||
this.cale.setDate(date,'init')
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.calendar = this.cale.getInfo(date)
|
||||
this.changeConfirmStatus();
|
||||
},
|
||||
/**
|
||||
* 变化触发
|
||||
*/
|
||||
change() {
|
||||
this.changeConfirmStatus();
|
||||
if (!this.insert) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
changeConfirmStatus() {
|
||||
if(this.readonly) {
|
||||
this.allowConfirm = false;
|
||||
} else if (this.range) {
|
||||
this.allowConfirm = this.cale.rangeStatus.after ? true : false;
|
||||
} else if(this.multiple) {
|
||||
this.allowConfirm = this.cale.multipleStatus.data.length > 0 ? true : false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 选择月份触发
|
||||
*/
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 派发事件
|
||||
* @param {Object} name
|
||||
*/
|
||||
setEmit(name) {
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
lunar,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.rangeStatus,
|
||||
multiple: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fulldate: fullDate,
|
||||
lunar,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择天触发
|
||||
* @param {Object} weeks
|
||||
*/
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable || this.readonly) return
|
||||
this.calendar = weeks
|
||||
// 设置范围选择
|
||||
this.cale.setRange(this.calendar.fullDate)
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate);
|
||||
this.weeks = this.cale.weeks
|
||||
this.change()
|
||||
},
|
||||
/**
|
||||
* 回到今天
|
||||
*/
|
||||
backToday() {
|
||||
const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
|
||||
const date = this.cale.getDate(new Date())
|
||||
const todayYearMonth = `${date.year}-${date.month}`
|
||||
this.init(date.fullDate)
|
||||
if (nowYearMonth !== todayYearMonth) {
|
||||
this.monthSwitch()
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
/**
|
||||
* 上个月
|
||||
*/
|
||||
pre() {
|
||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
||||
this.setDate(preDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 下个月
|
||||
*/
|
||||
next() {
|
||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
||||
this.setDate(nextDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
$uv-border-color: #EDEDED !default;
|
||||
.uv-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
.line {
|
||||
width: 750rpx;
|
||||
height: 1px;
|
||||
border-bottom-color: $uv-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-calendars",
|
||||
"displayName": "uv-calendars 最新日历 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.15",
|
||||
"description": "新版本uv-calendars，不仅拥有老版本的所有功能，还增加了更加适用的插入页面等强大功能，且更加简洁。查看日期、选择单个或多个或任意范围日期，打点操作，自定义文案，自定义主题等强大功能。",
|
||||
"keywords": [
|
||||
"uv-ui",
|
||||
"uvui",
|
||||
"日历",
|
||||
"打卡",
|
||||
"日历选择"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration":{
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-popup",
|
||||
"uv-toolbar"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
## Calendars 全新日历
|
||||
|
||||
> **组件名：uv-calendars**
|
||||
|
||||
为了解决老版本`uv-calendar`性能问题，特别是对日期选择范围有很大限制，体验不友好等缺点。于是有了新版日历组件。
|
||||
|
||||
新版本`uv-calendars`，不仅拥有老版本的所有功能，还增加了更加适用的插入页面等强大功能，且更加简洁。查看日期、选择单个或多个或任意范围日期，打点操作，自定义文案，自定义主题等强大功能。
|
||||
|
||||
常用场景：酒店日期预订、火车机票选择购买日期、上下班打卡等。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/calendars.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user