From ebc96a1cf0424c04dceacbc42f9ad2a897223be9 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 25 六月 2024 14:42:04 +0800
Subject: [PATCH] css
---
h5/components/Li-Calendar/Li-Calendar.vue | 1632 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 851 insertions(+), 781 deletions(-)
diff --git a/h5/components/Li-Calendar/Li-Calendar.vue b/h5/components/Li-Calendar/Li-Calendar.vue
index 02d9e74..f8f970c 100644
--- a/h5/components/Li-Calendar/Li-Calendar.vue
+++ b/h5/components/Li-Calendar/Li-Calendar.vue
@@ -1,836 +1,884 @@
<template>
- <view>
- <view class='calendar-Time-header under_line'>
- <view class="header-left">
- <!-- <image :src="lastDisabled ? disable : nodisable" mode="widthFix" @tap="subMonth"></image> -->
- <image :src="nodisable" mode="widthFix" @tap="subMonth"></image>
- <text>{{title_time}}</text>
- <image src="@/static/meeting/icon/ar_right@2x.png" mode="widthFix" @tap="addMonth"></image>
- </view>
- <view class="header-right" @tap="backToToday">鍥炲埌浠婂ぉ</view>
- <!-- <text class='calendar-lastMonth' @tap="subMonth" v-bind:class="{'calendar-btn-disabled' : lastDisabled }">{{lastText}}</text>
+ <view>
+ <view class="calendar-Time-header under_line">
+ <view class="header-left">
+ <!-- <image :src="lastDisabled ? disable : nodisable" mode="widthFix" @tap="subMonth"></image> -->
+ <image :src="nodisable" mode="widthFix" @tap="subMonth"></image>
+ <text>{{ title_time }}</text>
+ <image
+ src="@/static/meeting/icon/ar_right@2x.png"
+ mode="widthFix"
+ @tap="addMonth"
+ ></image>
+ </view>
+ <view class="header-right" @tap="backToToday">鍥炲埌浠婂ぉ</view>
+ <!-- <text class='calendar-lastMonth' @tap="subMonth" v-bind:class="{'calendar-btn-disabled' : lastDisabled }">{{lastText}}</text>
<text class='calendar-TimeH'>{{title_time}}</text>
<text class='calendar-nextMonth' @tap="addMonth" v-bind:class="{'calendar-btn-disabled' : nextDisabled }">{{nextText}}</text>
<text class='calendar-backToToday' @tap="backToToday">鍥炲埌浠婂ぉ</text> -->
- </view>
- <view class='ClearBoth'></view>
- <view class="calendar-content">
- <view class="calendar-row calendar-header">
- <view class="calendar-col aligncanter">鍛ㄦ棩</view>
- <view class="calendar-col aligncanter">鍛ㄤ竴</view>
- <view class="calendar-col aligncanter">鍛ㄤ簩</view>
- <view class="calendar-col aligncanter">鍛ㄤ笁</view>
- <view class="calendar-col aligncanter">鍛ㄥ洓</view>
- <view class="calendar-col aligncanter">鍛ㄤ簲</view>
- <view class="calendar-col aligncanter">鍛ㄥ叚</view>
- </view>
- <view class="calendar-row calendar-day" v-bind:style="{'transform':transformObj, 'transition-duration':transformTimeObj}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
- <view class="calendar-col aligncanter calendar-col-lastMonth" v-for='item in beforeDateList' v-bind:key='item.key'
- @tap="subMonth" v-bind:class="{'calendar-out-of-Date' : item.outOfDate }">{{item.dateIndex}}
- <text class='calendar-text'>{{item.markText}}</text>
- </view>
+ </view>
+ <view class="ClearBoth"></view>
+ <view class="calendar-content">
+ <view class="calendar-row calendar-header">
+ <view class="calendar-col aligncanter">鍛ㄦ棩</view>
+ <view class="calendar-col aligncanter">鍛ㄤ竴</view>
+ <view class="calendar-col aligncanter">鍛ㄤ簩</view>
+ <view class="calendar-col aligncanter">鍛ㄤ笁</view>
+ <view class="calendar-col aligncanter">鍛ㄥ洓</view>
+ <view class="calendar-col aligncanter">鍛ㄤ簲</view>
+ <view class="calendar-col aligncanter">鍛ㄥ叚</view>
+ </view>
+ <view
+ class="calendar-row calendar-day"
+ v-bind:style="{
+ transform: transformObj,
+ 'transition-duration': transformTimeObj,
+ }"
+ @touchstart="touchstart"
+ @touchmove="touchmove"
+ @touchend="touchend"
+ >
+ <view
+ class="calendar-col aligncanter calendar-col-lastMonth"
+ v-for="item in beforeDateList"
+ v-bind:key="item.key"
+ @tap="subMonth"
+ v-bind:class="{ 'calendar-out-of-Date': item.outOfDate }"
+ >{{ item.dateIndex }}
+ <text class="calendar-text">{{ item.markText }}</text>
+ </view>
- <view class="calendar-col aligncanter currentDays" v-bind:class="{'calendar-active' : item.dateIndex == currentSelectTime
- , 'calendar-today' : item.isToday
- , 'calendar-range' : item.isRanges
- , 'calendar-out-of-Date' : item.outOfDate }"
- v-for='item in dateList' v-bind:key='item.key' @tap="selectedDateFun(item.dateIndex)">
- <view class='dayValue'>
- <text class='calendar-date calendar-day-6-7' v-if="item.isDaySunOrSat">{{item.dateIndex}}</text>
- <text v-else class='calendar-date'>{{item.dateIndex}}</text>
- <text class='calendar-point' v-if="item.pointText" v-bind:style="{'color':item.pointTextColor?item.pointTextColor:maskColor}">{{item.pointText}}</text>
- <text class='calendar-text' v-bind:style="{'color':item.markTextColor?item.markTextColor:maskColor}">{{item.markText}}</text>
- </view>
- </view>
+ <view
+ class="calendar-col aligncanter currentDays"
+ v-bind:class="{
+ 'calendar-active': item.dateIndex == currentSelectTime,
+ 'calendar-today': item.isToday,
+ 'calendar-range': item.isRanges,
+ 'calendar-out-of-Date': item.outOfDate,
+ }"
+ v-for="item in dateList"
+ v-bind:key="item.key"
+ @tap="selectedDateFun(item.dateIndex)"
+ >
+ <view class="dayValue">
+ <text
+ class="calendar-date calendar-day-6-7"
+ v-if="item.isDaySunOrSat"
+ >{{ item.dateIndex }}</text
+ >
+ <text v-else class="calendar-date">{{ item.dateIndex }}</text>
+ <text
+ class="calendar-point"
+ v-if="item.pointText"
+ v-bind:style="{
+ color: item.pointTextColor ? item.pointTextColor : maskColor,
+ }"
+ >{{ item.pointText }}</text
+ >
+ <text
+ class="calendar-text"
+ v-bind:style="{
+ color: item.markTextColor ? item.markTextColor : maskColor,
+ }"
+ >{{ item.markText }}</text
+ >
+ </view>
+ </view>
- <view class="calendar-col aligncanter calendar-col-nextMonth" v-for='item in afterDateList' v-bind:key='item.key'
- @tap="addMonth" v-bind:class="{'calendar-out-of-Date' : item.outOfDate }">{{item.dateIndex}}
- <text class='calendar-text'>{{item.markText}}</text>
- </view>
- </view>
- <view class="ClearBoth"></view>
- </view>
- </view>
+ <view
+ class="calendar-col aligncanter calendar-col-nextMonth"
+ v-for="item in afterDateList"
+ v-bind:key="item.key"
+ @tap="addMonth"
+ v-bind:class="{ 'calendar-out-of-Date': item.outOfDate }"
+ >{{ item.dateIndex }}
+ <text class="calendar-text">{{ item.markText }}</text>
+ </view>
+ </view>
+ <view class="ClearBoth"></view>
+ </view>
+ </view>
</template>
<script>
- import lunarYearTool from './sloarToLunar.js'
- import { getDay } from '@/utils/utils.js'
- export default {
- name: 'Li-Calendar',
- props: {
- /**
- * @description 褰撳墠鏃堕棿 yyyy-MM-dd
- */
- currentTime: {
- type: String,
- default: function() {
- let timeObj = new Date();
- return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate();
- }
- },
- /**
- * @description 鏍囪鐐瑰垪琛�
- * time 鏍囪鏃堕棿 yyyy-MM-dd
- * text 鏍囪鍐呭
- * markPoint 鏄惁鏄剧ず鏍囪鐐� 榛樿false
- * markTextColor 鏍囪鍐呭棰滆壊
- * pointText 宸︿笂瑙掓爣璁扮偣鍐呭
- * pointTextColor 鏍囪鐐归鑹�
- */
- mark: {
- type: Array,
- default: function() {
- return undefined;
- }
- },
- /**
- * @description 涓婃湀鏂囧瓧
- */
- lastText: {
- type: String,
- default: '銆�'
- },
- /**
- * @description 涓嬫湀鏂囧瓧
- */
- nextText: {
- type: String,
- default: '銆�'
- },
- /**
- * @description 鍏ㄥ眬鏍囪鐐归鑹诧紝鍖呮嫭鐐瑰拰鏂囧瓧
- */
- maskColor: {
- type: String,
- default: '#01AAED'
- },
- /**
- * @description 鏄惁鏄剧ず鍐滃巻锛宮ask浼樺厛绾ч珮
- */
- showLunar: {
- type: Boolean,
- default: true
- },
- /**
- * @description 璁剧疆鏍囪鑼冨洿
- */
- range: {
- type: Object,
- default: function() {
- return {
- rangeStart: undefined, //璁剧疆鏍囪鑼冨洿寮�濮嬶紝yyyy-MM-dd
- rangeEnd: undefined //璁剧疆鏍囪鑼冨洿缁撴潫锛寉yyy-MM-dd
- }
- }
- },
- /**
- * @description 鏄惁寮�鍚寖鍥撮�夋嫨妯″紡
- */
- rangeMode: {
- type: Boolean,
- default: false
- },
- /**
- * @description 鏃ュ巻璧峰鏃堕棿 yyyy-MM-dd
- */
- dateStart: {
- type: String,
- default: '1970-01-01'
- },
- /**
- * @description 鏃ュ巻缁撴潫鏃堕棿 yyyy-MM-dd
- */
- dateEnd: {
- type: String,
- default: '2100-12-31'
- },
- /**
- * @description 鏄惁鍙互婊氬姩
- */
- canDrag:{
- type: Boolean,
- default: true
- },
- },
- created() {
- this.render();
- },
- data() {
- return {
- nodisable: require('@/static/meeting/icon/ar_left@2x.png'),
- disable: require('@/static/meeting/icon/ar_left_disable.png'),
-
- nextDisabled: false,
- lastDisabled: true,
- currentSelectTime: undefined, //鐐瑰嚮鏃朵繚瀛樼殑dateIndex
- title_time: '', //椤跺ご鏂囨湰
- year: undefined, //褰撳墠骞�
- month: undefined, //褰撳墠鏈�
- beforeDateList: [], //涓婁釜鏈堢殑鏃ユ湡鍒楄〃
- dateList: [], //鏈湀鐨勬棩鏈熷垪琛�
- afterDateList: [], //涓嬩釜鏈堢殑鏃ユ湡鍒楄〃
- firstRangeSelected: false, // 鑼冨洿寮�濮嬫椂闂存槸鍚﹀凡缁忛�夋嫨
- rangeStart_: undefined, //鏍囪鑼冨洿寮�濮嬶紝yyyyMM-dd
- rangeEnd_: undefined, //鏍囪鑼冨洿缁撴潫锛寉yyyMM-dd
- transform_x:0,
- transform_time:0,
- };
- },
- methods: {
- render(setTimeStr) { //鍒濆鍖�
- let that = this;
- let currentTimeStr = setTimeStr ? setTimeStr : that.currentTime;
- let timeObj = this.toDateByStr(currentTimeStr); //褰撳墠閫夊畾鐨勬椂闂�
- //璁＄畻澶撮儴鏄剧ず鐨勫勾鏈�
- let _tempTileMonth = (timeObj.getMonth() + 1);
- if (_tempTileMonth < 10)
- _tempTileMonth = '0' + _tempTileMonth;
- this.title_time = timeObj.getFullYear() + "骞�" + _tempTileMonth + "鏈�";
+import lunarYearTool from './sloarToLunar.js'
+import { getDay } from '@/utils/utils.js'
+export default {
+ name: 'Li-Calendar',
+ props: {
+ /**
+ * @description 褰撳墠鏃堕棿 yyyy-MM-dd
+ */
+ currentTime: {
+ type: String,
+ default: function () {
+ let timeObj = new Date()
+ return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate()
+ }
+ },
+ /**
+ * @description 鏍囪鐐瑰垪琛�
+ * time 鏍囪鏃堕棿 yyyy-MM-dd
+ * text 鏍囪鍐呭
+ * markPoint 鏄惁鏄剧ず鏍囪鐐� 榛樿false
+ * markTextColor 鏍囪鍐呭棰滆壊
+ * pointText 宸︿笂瑙掓爣璁扮偣鍐呭
+ * pointTextColor 鏍囪鐐归鑹�
+ */
+ mark: {
+ type: Array,
+ default: function () {
+ return undefined
+ }
+ },
+ /**
+ * @description 涓婃湀鏂囧瓧
+ */
+ lastText: {
+ type: String,
+ default: '銆�'
+ },
+ /**
+ * @description 涓嬫湀鏂囧瓧
+ */
+ nextText: {
+ type: String,
+ default: '銆�'
+ },
+ /**
+ * @description 鍏ㄥ眬鏍囪鐐归鑹诧紝鍖呮嫭鐐瑰拰鏂囧瓧
+ */
+ maskColor: {
+ type: String,
+ default: '#01AAED'
+ },
+ /**
+ * @description 鏄惁鏄剧ず鍐滃巻锛宮ask浼樺厛绾ч珮
+ */
+ showLunar: {
+ type: Boolean,
+ default: true
+ },
+ /**
+ * @description 璁剧疆鏍囪鑼冨洿
+ */
+ range: {
+ type: Object,
+ default: function () {
+ return {
+ rangeStart: undefined, //璁剧疆鏍囪鑼冨洿寮�濮嬶紝yyyy-MM-dd
+ rangeEnd: undefined //璁剧疆鏍囪鑼冨洿缁撴潫锛寉yyy-MM-dd
+ }
+ }
+ },
+ /**
+ * @description 鏄惁寮�鍚寖鍥撮�夋嫨妯″紡
+ */
+ rangeMode: {
+ type: Boolean,
+ default: false
+ },
+ /**
+ * @description 鏃ュ巻璧峰鏃堕棿 yyyy-MM-dd
+ */
+ dateStart: {
+ type: String,
+ default: '1970-01-01'
+ },
+ /**
+ * @description 鏃ュ巻缁撴潫鏃堕棿 yyyy-MM-dd
+ */
+ dateEnd: {
+ type: String,
+ default: '2100-12-31'
+ },
+ /**
+ * @description 鏄惁鍙互婊氬姩
+ */
+ canDrag: {
+ type: Boolean,
+ default: true
+ },
+ },
+ created() {
+ this.render()
+ },
+ data() {
+ return {
+ nodisable: require('@/static/meeting/icon/ar_left@2x.png'),
+ disable: require('@/static/meeting/icon/ar_left_disable.png'),
- //鑾峰彇褰撳墠鏃堕棿鏈堜唤1鍙�
- let firstDayStr = timeObj.getFullYear() + "/" + (timeObj.getMonth() + 1) + "/01";
- let date = that.toDateByStr(firstDayStr);
- that.year = date.getFullYear();
- that.month = date.getMonth() + 1;
- let firstDayWeek = date.getDay(); //绗竴澶╂槸鏄熸湡鍑�
- let grid_sum = 0; //鎬绘牸瀛愭暟 锛岀敤浜庡悗闈㈠～婊℃牸瀛�
- //鑾峰彇涓婁竴涓湀鐨勫ぉ鏁�
- let TempMonth;
- let TempYear;
- if (that.month == 1) { //璺ㄥ勾
- TempMonth = 12;
- TempYear = that.year - 1;
- } else {
- TempYear = that.year;
- TempMonth = that.month - 1;
- }
- let TempLastMonthStr = TempYear + "/" + TempMonth + "/01";
- let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr);
- let lastMonthStartDay = lastMonthTotalDay - firstDayWeek;
+ nextDisabled: false,
+ lastDisabled: true,
+ currentSelectTime: undefined, //鐐瑰嚮鏃朵繚瀛樼殑dateIndex
+ title_time: '', //椤跺ご鏂囨湰
+ year: undefined, //褰撳墠骞�
+ month: undefined, //褰撳墠鏈�
+ beforeDateList: [], //涓婁釜鏈堢殑鏃ユ湡鍒楄〃
+ dateList: [], //鏈湀鐨勬棩鏈熷垪琛�
+ afterDateList: [], //涓嬩釜鏈堢殑鏃ユ湡鍒楄〃
+ firstRangeSelected: false, // 鑼冨洿寮�濮嬫椂闂存槸鍚﹀凡缁忛�夋嫨
+ rangeStart_: undefined, //鏍囪鑼冨洿寮�濮嬶紝yyyyMM-dd
+ rangeEnd_: undefined, //鏍囪鑼冨洿缁撴潫锛寉yyyMM-dd
+ transform_x: 0,
+ transform_time: 0,
+ }
+ },
+ methods: {
+ render(setTimeStr) { //鍒濆鍖�
+ let that = this
+ let currentTimeStr = setTimeStr ? setTimeStr : that.currentTime
+ let timeObj = this.toDateByStr(currentTimeStr) //褰撳墠閫夊畾鐨勬椂闂�
+ //璁＄畻澶撮儴鏄剧ず鐨勫勾鏈�
+ let _tempTileMonth = (timeObj.getMonth() + 1)
+ if (_tempTileMonth < 10)
+ _tempTileMonth = '0' + _tempTileMonth
+ this.title_time = timeObj.getFullYear() + "骞�" + _tempTileMonth + "鏈�"
- let _dateStart = that.toDateByStr1(that.dateStart);
- let _dateEnd = that.toDateByStr1(that.dateEnd);
- // 鍒涘缓鍓嶉潰鐨勬棩鏈�
- that.beforeDateList = [];
- for (let i = 0; i < firstDayWeek; i++) {
- grid_sum++;
- lastMonthStartDay++;
- let tempObj = {
- dateIndex: lastMonthStartDay,
- key: 'before_' + i
- };
+ //鑾峰彇褰撳墠鏃堕棿鏈堜唤1鍙�
+ let firstDayStr = timeObj.getFullYear() + "/" + (timeObj.getMonth() + 1) + "/01"
+ let date = that.toDateByStr(firstDayStr)
+ that.year = date.getFullYear()
+ that.month = date.getMonth() + 1
+ let firstDayWeek = date.getDay() //绗竴澶╂槸鏄熸湡鍑�
+ let grid_sum = 0 //鎬绘牸瀛愭暟 锛岀敤浜庡悗闈㈠～婊℃牸瀛�
+ //鑾峰彇涓婁竴涓湀鐨勫ぉ鏁�
+ let TempMonth
+ let TempYear
+ if (that.month == 1) { //璺ㄥ勾
+ TempMonth = 12
+ TempYear = that.year - 1
+ } else {
+ TempYear = that.year
+ TempMonth = that.month - 1
+ }
+ let TempLastMonthStr = TempYear + "/" + TempMonth + "/01"
+ let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr)
+ let lastMonthStartDay = lastMonthTotalDay - firstDayWeek
- //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
- let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay);
- if (_dateStart > _tempBeforeDate || _tempBeforeDate > _dateEnd) {
- tempObj.outOfDate = true;
- }
+ let _dateStart = that.toDateByStr1(that.dateStart)
+ let _dateEnd = that.toDateByStr1(that.dateEnd)
+ // 鍒涘缓鍓嶉潰鐨勬棩鏈�
+ that.beforeDateList = []
+ for (let i = 0; i < firstDayWeek; i++) {
+ grid_sum++
+ lastMonthStartDay++
+ let tempObj = {
+ dateIndex: lastMonthStartDay,
+ key: 'before_' + i
+ }
- //鑾峰彇鍐滃巻
- if (that.showLunar) {
- let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay);
- let tempLunarDay = LunarDate.lunarDay == '鍒濅竴' ? LunarDate.lunarMonth + '鏈�' : LunarDate.lunarDay;
- tempObj.markText = tempLunarDay;
- }
+ //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
+ let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay)
+ if (_dateStart > _tempBeforeDate || _tempBeforeDate > _dateEnd) {
+ tempObj.outOfDate = true
+ }
- that.beforeDateList.push(tempObj);
- }
+ //鑾峰彇鍐滃巻
+ if (that.showLunar) {
+ let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay)
+ let tempLunarDay = LunarDate.lunarDay == '鍒濅竴' ? LunarDate.lunarMonth + '鏈�' : LunarDate.lunarDay
+ tempObj.markText = tempLunarDay
+ }
- //鑾峰彇涓�涓湀鐨勫ぉ鏁�
- let totalDay = that.getTotalDay(currentTimeStr);
-
- //鐢熸垚鏈湀鏃ュ巻
- let today = new Date();
- let today_year = today.getFullYear();
- let today_month = today.getMonth() + 1;
- let today_day = today.getDate();
- that.dateList = [];
- for (let i = 1; i <= totalDay; i++) { //寰幆鏃�
- grid_sum++;
+ that.beforeDateList.push(tempObj)
+ }
- let tempObj = {
- dateIndex: i,
- key: 'date_' + i,
- isRanges: false,
- isToday: false
- };
- //褰撳墠鏃ユ湡鍙橀噺
- let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i);
+ //鑾峰彇涓�涓湀鐨勫ぉ鏁�
+ let totalDay = that.getTotalDay(currentTimeStr)
- //鍒ゆ柇鏄惁涓哄綋澶�
- if (today_year == that.year && today_month == that.month && today_day == i)
- tempObj.isToday = true;
+ //鐢熸垚鏈湀鏃ュ巻
+ let today = new Date()
+ let today_year = today.getFullYear()
+ let today_month = today.getMonth() + 1
+ let today_day = today.getDate()
+ that.dateList = []
+ for (let i = 1; i <= totalDay; i++) { //寰幆鏃�
+ grid_sum++
- //鍛ㄥ叚鍜屽懆鏃ワ紝鐗规畩澶勭悊
- let tempCurrWeek = tempDay.getDay();
- if (tempCurrWeek == 0 || tempCurrWeek == 6)
- tempObj.isDaySunOrSat = true;
+ let tempObj = {
+ dateIndex: i,
+ key: 'date_' + i,
+ isRanges: false,
+ isToday: false
+ }
+ //褰撳墠鏃ユ湡鍙橀噺
+ let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i)
- //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
- if (_dateStart > tempDay || tempDay > _dateEnd) {
- tempObj.outOfDate = true;
- }
+ //鍒ゆ柇鏄惁涓哄綋澶�
+ if (today_year == that.year && today_month == that.month && today_day == i)
+ tempObj.isToday = true
- //鑾峰彇鍐滃巻
- if (that.showLunar) {
- let LunarDate = that.sloarToLunar(that.year, that.month, i);
- that.lunarMonth = LunarDate.lunarMonth;
- that.lunarYear = LunarDate.lunarYear;
- let tempLunarDay = LunarDate.lunarDay == '鍒濅竴' ? LunarDate.lunarMonth + '鏈�' : LunarDate.lunarDay;
- tempObj.lunarMonth = LunarDate.lunarMonth;
- tempObj.lunarYear = LunarDate.lunarYear;
- tempObj.lunarDay = LunarDate.lunarDay;
- tempObj.markText = tempLunarDay;
- tempObj.markTextColor = '#454545';
- }
+ //鍛ㄥ叚鍜屽懆鏃ワ紝鐗规畩澶勭悊
+ let tempCurrWeek = tempDay.getDay()
+ if (tempCurrWeek == 0 || tempCurrWeek == 6)
+ tempObj.isDaySunOrSat = true
- //璁剧疆浜嗘爣璁扮偣
- if (that.mark) {
- for (let z = 0; z < that.mark.length; z++) { //鍒ゆ柇鏄惁涓烘爣璁扮偣
- let tempDayMark = that.toDateByStr1(that.mark[z].time.trim())
- if (tempDay.getTime() == tempDayMark.getTime()) {
- let tempTextStr = that.mark[z].text
- if (that.mark[z].markPoint != false) { // 鏄惁鏄剧ず鐐�
- tempObj.pointText = that.mark[z].pointText ? that.mark[z].pointText : '鈼�';
- tempObj.pointTextColor = that.mark[z].pointTextColor ? that.mark[z].pointTextColor : undefined;
- }
- if (tempTextStr != undefined && tempTextStr != "") { // 鏄惁鏄剧ず鏂囧瓧
- tempObj.markText = tempTextStr;
- tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor : undefined;
- }
- break;
- }
- }
- }
+ //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
+ if (_dateStart > tempDay || tempDay > _dateEnd) {
+ tempObj.outOfDate = true
+ }
- that.dateList.push(tempObj);
- }
+ //鑾峰彇鍐滃巻
+ if (that.showLunar) {
+ let LunarDate = that.sloarToLunar(that.year, that.month, i)
+ that.lunarMonth = LunarDate.lunarMonth
+ that.lunarYear = LunarDate.lunarYear
+ let tempLunarDay = LunarDate.lunarDay == '鍒濅竴' ? LunarDate.lunarMonth + '鏈�' : LunarDate.lunarDay
+ tempObj.lunarMonth = LunarDate.lunarMonth
+ tempObj.lunarYear = LunarDate.lunarYear
+ tempObj.lunarDay = LunarDate.lunarDay
+ tempObj.markText = tempLunarDay
+ tempObj.markTextColor = '#454545'
+ }
- that.setRange();
+ //璁剧疆浜嗘爣璁扮偣
+ if (that.mark) {
+ for (let z = 0; z < that.mark.length; z++) { //鍒ゆ柇鏄惁涓烘爣璁扮偣
+ let tempDayMark = that.toDateByStr1(that.mark[z].time.trim())
+ if (tempDay.getTime() == tempDayMark.getTime()) {
+ let tempTextStr = that.mark[z].text
+ if (that.mark[z].markPoint != false) { // 鏄惁鏄剧ず鐐�
+ tempObj.pointText = that.mark[z].pointText ? that.mark[z].pointText : '鈼�'
+ tempObj.pointTextColor = that.mark[z].pointTextColor ? that.mark[z].pointTextColor : undefined
+ }
+ if (tempTextStr != undefined && tempTextStr != "") { // 鏄惁鏄剧ず鏂囧瓧
+ tempObj.markText = tempTextStr
+ tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor : undefined
+ }
+ break
+ }
+ }
+ }
- // 鍒涘缓鍚庨潰鐨勭┖鐧斤紝琛ュ浜旇
- that.afterDateList = [];
- if (grid_sum < 42) { // 鍒涘缓鍚庨潰鐨勭┖鐧斤紝琛ュ浜旇
- let j = 0;
+ that.dateList.push(tempObj)
+ }
- //鑾峰彇涓嬩竴鏈�
- let TempMonthNext;
- let TempYearNext;
- if (that.month == 12) { //璺ㄥ勾
- TempMonthNext = 1;
- TempYearNext = that.year + 1;
- } else {
- TempYearNext = that.year;
- TempMonthNext = that.month + 1;
- }
+ that.setRange()
- for (let i = grid_sum; i < 42; i++) {
- j++;
+ // 鍒涘缓鍚庨潰鐨勭┖鐧斤紝琛ュ浜旇
+ that.afterDateList = []
+ if (grid_sum < 42) { // 鍒涘缓鍚庨潰鐨勭┖鐧斤紝琛ュ浜旇
+ let j = 0
- let tempObj = {
- dateIndex: j,
- key: 'after_' + j
- };
- //鑾峰彇鍐滃巻
- if (that.showLunar) {
- let LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j);
- let tempLunarDay = LunarDate.lunarDay == '鍒濅竴' ? LunarDate.lunarMonth + '鏈�' : LunarDate.lunarDay;
- tempObj.markText = tempLunarDay;
- }
+ //鑾峰彇涓嬩竴鏈�
+ let TempMonthNext
+ let TempYearNext
+ if (that.month == 12) { //璺ㄥ勾
+ TempMonthNext = 1
+ TempYearNext = that.year + 1
+ } else {
+ TempYearNext = that.year
+ TempMonthNext = that.month + 1
+ }
- //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
- let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j);
- if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {
- tempObj.outOfDate = true;
- }
+ for (let i = grid_sum; i < 42; i++) {
+ j++
- that.afterDateList.push(tempObj);
- }
- }
- },
- sloarToLunar(year,month,day){
- // console.log('----')
- // console.log(year + "--" +month+ "--" + day)
- let result = lunarYearTool.sloarToLunar(year,month,day);
- //console.log(result)
- return result;
- },
- getTotalDay(time) { //鑾峰彇鏈� 鏃ユ湡鎬绘暟
- time = time.replace(/-/g, "/");
- let selectedDate = new Date(time);
- if (selectedDate == "Invalid Date") {
- selectedDate = new Date(time + "/01");
- }
-
- let dayMany = new Date(selectedDate.getFullYear(),(selectedDate.getMonth() + 1), 0).getDate()
- return dayMany;
- },
- toDateByStr(timeStr) { //瀛楃涓茶浆鎹㈡椂闂达紝杞崲澶辫触鎴栬�呬笉浼犲瓧绗︿覆鍒欒繑鍥炲綋鍓�
- let timeObj;
- if (timeStr) {
- timeObj = new Date(timeStr.replace(/-/g, "/"));
- }
- if (!timeStr || timeObj == "Invalid Date")
- timeObj = new Date();
- return timeObj;
- },
- toDateByStr1(timeStr) { //瀛楃涓茶浆鎹㈡椂闂达紝杞崲澶辫触鎴栬�呬笉浼犲瓧绗︿覆鍒檔ull
- try {
- let timeObj;
- if (timeStr) {
- timeObj = new Date(timeStr.replace(/-/g, "/"));
- }
- if (!timeStr || timeObj == "Invalid Date")
- return null;
- return timeObj;
- } catch (e) {
- return null;
- }
- },
- getTimeStrFormat(timeStr) { //鑾峰彇鏍煎紡鍖栫殑鏃堕棿 yyyy-MM-dd
- let timeObj;
- if (timeStr) {
- timeObj = new Date(timeStr.replace(/-/g, "/"));
- }
- if (!timeStr || timeObj == "Invalid Date")
- timeObj = new Date();
- return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate();
- },
- selectedDateFun(index) { //鐐瑰嚮鏃ユ湡
- let that = this;
- let selectObj = that.dateList[index - 1];
- selectObj.year = that.year;
- selectObj.month = that.month;
- selectObj.day = index;
- selectObj.time = that.year + "-" + that.month + "-" + index;
- that.$emit('dayChange', selectObj);
+ let tempObj = {
+ dateIndex: j,
+ key: 'after_' + j
+ }
+ //鑾峰彇鍐滃巻
+ if (that.showLunar) {
+ let LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j)
+ let tempLunarDay = LunarDate.lunarDay == '鍒濅竴' ? LunarDate.lunarMonth + '鏈�' : LunarDate.lunarDay
+ tempObj.markText = tempLunarDay
+ }
- //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
- if (that.checkOutOfDate(selectObj.time)) {
- return;
- }
+ //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
+ let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j)
+ if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {
+ tempObj.outOfDate = true
+ }
- that.currentSelectTime = index;
-
- console.log(index)
+ that.afterDateList.push(tempObj)
+ }
+ }
+ },
+ sloarToLunar(year, month, day) {
+ // console.log('----')
+ // console.log(year + "--" +month+ "--" + day)
+ let result = lunarYearTool.sloarToLunar(year, month, day)
+ //console.log(result)
+ return result
+ },
+ getTotalDay(time) { //鑾峰彇鏈� 鏃ユ湡鎬绘暟
+ time = time.replace(/-/g, "/")
+ let selectedDate = new Date(time)
+ if (selectedDate == "Invalid Date") {
+ selectedDate = new Date(time + "/01")
+ }
- //寮�鍚簡鑼冨洿閫夋嫨妯″紡
- if (that.rangeMode) {
- if (!that.firstRangeSelected) { //閫夋嫨寮�濮嬫椂闂�
- that.firstRangeSelected = !that.firstRangeSelected
- that.rangeStart_ = selectObj.time;
- that.rangeEnd_ = undefined;
- that.clearRange();
- } else { //閫夋嫨浜嗙粨鏉熸椂闂�
- that.rangeEnd_ = selectObj.time;
- that.firstRangeSelected = !that.firstRangeSelected
- that.$emit('rangeChange', {
- start: that.rangeStart_,
- end: that.rangeEnd_,
- });
- that.setRange();
- }
- }
- },
- addMonth() { //鍔犱竴涓湀
- let that = this;
- that.currentSelectTime = ''
- let _Month = that.month;
- let _Year = that.year;
- if (that.month == 12) { //璺ㄥ勾
- _Month = 1;
- _Year += 1;
- } else {
- _Month += 1;
- }
+ let dayMany = new Date(selectedDate.getFullYear(), (selectedDate.getMonth() + 1), 0).getDate()
+ return dayMany
+ },
+ toDateByStr(timeStr) { //瀛楃涓茶浆鎹㈡椂闂达紝杞崲澶辫触鎴栬�呬笉浼犲瓧绗︿覆鍒欒繑鍥炲綋鍓�
+ let timeObj
+ if (timeStr) {
+ timeObj = new Date(timeStr.replace(/-/g, "/"))
+ }
+ if (!timeStr || timeObj == "Invalid Date")
+ timeObj = new Date()
+ return timeObj
+ },
+ toDateByStr1(timeStr) { //瀛楃涓茶浆鎹㈡椂闂达紝杞崲澶辫触鎴栬�呬笉浼犲瓧绗︿覆鍒檔ull
+ try {
+ let timeObj
+ if (timeStr) {
+ timeObj = new Date(timeStr.replace(/-/g, "/"))
+ }
+ if (!timeStr || timeObj == "Invalid Date")
+ return null
+ return timeObj
+ } catch (e) {
+ return null
+ }
+ },
+ getTimeStrFormat(timeStr) { //鑾峰彇鏍煎紡鍖栫殑鏃堕棿 yyyy-MM-dd
+ let timeObj
+ if (timeStr) {
+ timeObj = new Date(timeStr.replace(/-/g, "/"))
+ }
+ if (!timeStr || timeObj == "Invalid Date")
+ timeObj = new Date()
+ return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate()
+ },
+ selectedDateFun(index) { //鐐瑰嚮鏃ユ湡
+ let that = this
+ let selectObj = that.dateList[index - 1]
+ selectObj.year = that.year
+ selectObj.month = that.month
+ selectObj.day = index
+ selectObj.time = that.year + "-" + that.month + "-" + index
+ that.$emit('dayChange', selectObj)
- let str = _Year + "/" + _Month + "/01";
+ //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
+ if (that.checkOutOfDate(selectObj.time)) {
+ return
+ }
- //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
- if (that.checkOutOfDate(str)) {
- that.nextDisabled = true;
- return;
- }
+ that.currentSelectTime = index
- that.month = _Month;
- that.year = _Year;
- that.lastDisabled = false;
+ console.log(index)
- //妫�鏌ユ棩鏈熶笂闄愬�兼槸鍚﹀湪褰撴湀鍐咃紝濡傛灉鍦ㄥ垯涓嶈兘鍐嶅垏鎹笅涓湀
- if (that.checkDateRange(that.year, that.month, 1)) {
- that.nextDisabled = true;
- }
+ //寮�鍚簡鑼冨洿閫夋嫨妯″紡
+ if (that.rangeMode) {
+ if (!that.firstRangeSelected) { //閫夋嫨寮�濮嬫椂闂�
+ that.firstRangeSelected = !that.firstRangeSelected
+ that.rangeStart_ = selectObj.time
+ that.rangeEnd_ = undefined
+ that.clearRange()
+ } else { //閫夋嫨浜嗙粨鏉熸椂闂�
+ that.rangeEnd_ = selectObj.time
+ that.firstRangeSelected = !that.firstRangeSelected
+ that.$emit('rangeChange', {
+ start: that.rangeStart_,
+ end: that.rangeEnd_,
+ })
+ that.setRange()
+ }
+ }
+ },
+ addMonth() { //鍔犱竴涓湀
+ let that = this
+ that.currentSelectTime = ''
+ let _Month = that.month
+ let _Year = that.year
+ if (that.month == 12) { //璺ㄥ勾
+ _Month = 1
+ _Year += 1
+ } else {
+ _Month += 1
+ }
- if (that.rangeMode) { //寮�鍚簡鑼冨洿妯″紡
- that.currentSelectTime = undefined;
- }
+ let str = _Year + "/" + _Month + "/01"
- that.$emit('monthChange', {
- date: str
- });
- that.render(str);
- },
- subMonth() { //鍑忎竴涓湀
- let that = this;
-
- that.currentSelectTime = ''
+ //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
+ if (that.checkOutOfDate(str)) {
+ that.nextDisabled = true
+ return
+ }
- let _Month = that.month;
- let _Year = that.year;
- if (that.month == 1) { //璺ㄥ勾
- _Month = 12;
- _Year -= 1;
- } else {
- _Month -= 1;
- }
+ that.month = _Month
+ that.year = _Year
+ that.lastDisabled = false
- let str = _Year + "/" + _Month + "/01";
+ //妫�鏌ユ棩鏈熶笂闄愬�兼槸鍚﹀湪褰撴湀鍐咃紝濡傛灉鍦ㄥ垯涓嶈兘鍐嶅垏鎹笅涓湀
+ if (that.checkDateRange(that.year, that.month, 1)) {
+ that.nextDisabled = true
+ }
- //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
- let _totalDay = that.getTotalDay(str);
- if (that.checkOutOfDate(_Year + "/" + _Month + "/" + _totalDay)) {
- that.lastDisabled = true;
- return;
- }
+ if (that.rangeMode) { //寮�鍚簡鑼冨洿妯″紡
+ that.currentSelectTime = undefined
+ }
- that.month = _Month;
- that.year = _Year;
- that.nextDisabled = false;
+ that.$emit('monthChange', {
+ date: str
+ })
+ that.render(str)
+ },
+ subMonth() { //鍑忎竴涓湀
+ let that = this
- //妫�鏌ユ棩鏈熶笅闄愬�兼槸鍚﹀湪褰撴湀鍐咃紝濡傛灉鍦ㄥ垯涓嶈兘鍐嶅垏鎹笂涓湀
- if (that.checkDateRange(that.year, that.month)) {
- that.lastDisabled = true;
- }
+ that.currentSelectTime = ''
- if (that.rangeMode) { //寮�鍚簡鑼冨洿妯″紡
- that.currentSelectTime = undefined;
- }
+ let _Month = that.month
+ let _Year = that.year
+ if (that.month == 1) { //璺ㄥ勾
+ _Month = 12
+ _Year -= 1
+ } else {
+ _Month -= 1
+ }
- that.$emit('monthChange', {
- date: str
- });
- that.render(str);
- },
- backToToday() { //鍥炲埌浠婂ぉ
- let currDate = new Date();
- let _year = currDate.getFullYear();
- let _month = currDate.getMonth() + 1;
+ let str = _Year + "/" + _Month + "/01"
- this.currentSelectTime = getDay().day
-
- this.$emit('dayChange', { time: getDay().date });
+ //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿
+ let _totalDay = that.getTotalDay(str)
+ if (that.checkOutOfDate(_Year + "/" + _Month + "/" + _totalDay)) {
+ that.lastDisabled = true
+ return
+ }
- //濡傛灉宸茬粡鏄綋鏈�
- if (_year == this.year && _month == this.month) {
- return;
- }
-
- let value = _year + "/" + _month + "/" + currDate.getDate();
- this.$emit('monthChange', {
- date: value
- });
- this.lastDisabled = true
-
- this.render(value);
- },
- setRange() { //璁剧疆鑼冨洿
- let that = this;
- let rangeStartDate = that.toDateByStr1(that.rangeStart_);
- let rangeEndDate = that.toDateByStr1(that.rangeEnd_);
- if (!rangeStartDate || !rangeEndDate)
- return;
- if (rangeStartDate > rangeEndDate) { //闃叉鑼冨洿鍑洪敊
- let tempD = rangeEndDate;
- rangeEndDate = rangeStartDate;
- rangeStartDate = tempD;
- }
+ that.month = _Month
+ that.year = _Year
+ that.nextDisabled = false
- //寰幆鍒ゆ柇鑼冨洿
- for (let i = 0; i < that.dateList.length; i++) {
- let _TempDtStr = that.year + "/" + that.month + "/" + that.dateList[i].dateIndex;
- let _TempDt = that.toDateByStr1(_TempDtStr);
- that.dateList[i].isRanges = false;
- if (rangeStartDate <= _TempDt && _TempDt <= rangeEndDate) //鏃堕棿鍦ㄨ寖鍥村唴
- that.dateList[i].isRanges = true;
- }
- },
- clearRange() { //鍏抽棴鑼冨洿妯″紡鑼冨洿
- let that = this;
- //寰幆鍒ゆ柇鑼冨洿
- for (let i = 0; i < that.dateList.length; i++) {
- that.dateList[i].isRanges = false;
- }
- },
- checkOutOfDate(time) { //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿,yyyy-MM-dd
- let that = this;
- let _dateStart = that.toDateByStr1(that.dateStart);
- let _dateEnd = that.toDateByStr1(that.dateEnd);
- let _tempDate = that.toDateByStr1(time);
- if (_dateStart > _tempDate || _tempDate > _dateEnd) {
- return true;
- } else
- return false;
- },
- checkDateRange(year, month, type) { //鍒ゆ柇鑼冨洿鐣岄檺鍊兼槸鍚﹀湪褰撴湀鍐�,yyyy-MM-dd,type锛�1 涓婇檺鍊�,鍏朵粬锛氫笅闄愬��
- let that = this;
+ //妫�鏌ユ棩鏈熶笅闄愬�兼槸鍚﹀湪褰撴湀鍐咃紝濡傛灉鍦ㄥ垯涓嶈兘鍐嶅垏鎹笂涓湀
+ if (that.checkDateRange(that.year, that.month)) {
+ that.lastDisabled = true
+ }
- let totalDay = that.getTotalDay(year + '/' + month + '/01');
- let firstD = that.toDateByStr1(year + '/' + month + '/01');
- let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay);
+ if (that.rangeMode) { //寮�鍚簡鑼冨洿妯″紡
+ that.currentSelectTime = undefined
+ }
- if (type == 1) { //涓婇檺鍊�
- let _dateEnd = that.toDateByStr1(that.dateEnd);
- if (firstD <= _dateEnd && _dateEnd <= lastD) {
- return true;
- } else
- return false;
- } else { //涓嬮檺鍊�
- let _dateStart = that.toDateByStr1(that.dateStart);
- if (firstD <= _dateStart && _dateStart <= lastD) {
- return true;
- } else
- return false;
- }
- },
- calendarTransform(x,time){ //鏃ュ巻婊戝姩鍔ㄧ敾
- this.transform_x = x;
- this.transform_time = time;
- },
- touchstart(event) {
- if(!this.canDrag)
- return;
- this.startPageX = event.touches[0].pageX;
- this.startPageY = event.touches[0].pageY;
- },
- touchmove(event) {
- if(!this.canDrag)
- return;
- let touchmovePageX = event.touches[0].pageX;
- let result = touchmovePageX - this.startPageX;
- this.calendarTransform(result,0);
- },
- touchend(event) {
- if(!this.canDrag)
- return;
- let that = this;
- let endPageX = event.changedTouches[0].pageX;
- let endPageY = event.changedTouches[0].pageY;
- let x = Math.abs(that.startPageX - endPageX); //妯潗鏍囦箣宸�
- let y = Math.abs(that.startPageY - endPageY); //绾靛潗鏍囦箣宸�
-
- let screenX = 0;
- try {
- const res = uni.getSystemInfoSync();
- screenX = res.windowWidth;
- } catch (e) {
- console.error(e)
- return;
- }
- if (that.startPageX > endPageX) { //宸︽粦
- let a = Math.atan(y / x);
- let Rate = x / screenX;
- if (a < Math.PI / 6 && Rate > 0.3) {
- screenX = -screenX;
- that.calendarTransform(screenX,300);
- setTimeout(function(){
- that.addMonth();
- that.calendarTransform(0,0);
- },300);
- }
- else{
- that.calendarTransform(0,300);
- }
- } else {
- let a = Math.atan(y / x);
- let Rate = x / screenX;
- if (a < Math.PI / 6 && Rate > 0.3) {
- that.calendarTransform(screenX,300);
- setTimeout(function(){
- that.subMonth();
- that.calendarTransform(0,0);
- },300);
- }
- else{
- that.calendarTransform(0,300);
- }
- }
- }
- },
- watch: {
- currentTime: function(val, oldVal) { //鏃堕棿鏀瑰彉
- let dateNew = this.toDateByStr1(val);
- if (dateNew.getFullYear() == this.year && (dateNew.getMonth() + 1) == this.month) {
- console.log('time is not change')
- } else {
- this.currentSelectTime = dateNew.getDate();
- this.render();
- }
- },
- range: function(val, oldVal) { //鑼冨洿鏀瑰彉
- if (val.rangeStart != oldVal.rangeStart || val.rangeEnd != oldVal.rangeEnd) {
- this.rangeStart_ = val.rangeStart;
- this.rangeEnd_ = val.rangeEnd;
- this.setRange();
- }
- },
- mark: function(val, oldVal) { //鏍囪鏀瑰彉
- this.render();
- },
- rangeMode: function(val, oldVal) { //鑼冨洿鏀瑰彉
- if (!val) { //濡傛灉鏄叧闂寖鍥存ā寮�
- this.rangeStart_ = undefined; //鏍囪鑼冨洿寮�濮嬶紝yyyyMM-dd
- this.rangeEnd_ = undefined; //鏍囪鑼冨洿缁撴潫锛寉yyyMM-dd
- this.firstRangeSelected = false;
- this.clearRange()
- }
- },
- },
- computed: {
- transformObj:function () {
- return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)';
- },
- transformTimeObj:function () {
- return this.transform_time + 'ms';
- }
- },
- }
+ that.$emit('monthChange', {
+ date: str
+ })
+ that.render(str)
+ },
+ backToToday() { //鍥炲埌浠婂ぉ
+ let currDate = new Date()
+ let _year = currDate.getFullYear()
+ let _month = currDate.getMonth() + 1
+
+ this.currentSelectTime = getDay().day
+
+ this.$emit('dayChange', { time: getDay().date })
+
+ //濡傛灉宸茬粡鏄綋鏈�
+ if (_year == this.year && _month == this.month) {
+ return
+ }
+
+ let value = _year + "/" + _month + "/" + currDate.getDate()
+ this.$emit('monthChange', {
+ date: value
+ })
+ this.lastDisabled = true
+
+ this.render(value)
+ },
+ setRange() { //璁剧疆鑼冨洿
+ let that = this
+ let rangeStartDate = that.toDateByStr1(that.rangeStart_)
+ let rangeEndDate = that.toDateByStr1(that.rangeEnd_)
+ if (!rangeStartDate || !rangeEndDate)
+ return
+ if (rangeStartDate > rangeEndDate) { //闃叉鑼冨洿鍑洪敊
+ let tempD = rangeEndDate
+ rangeEndDate = rangeStartDate
+ rangeStartDate = tempD
+ }
+
+ //寰幆鍒ゆ柇鑼冨洿
+ for (let i = 0; i < that.dateList.length; i++) {
+ let _TempDtStr = that.year + "/" + that.month + "/" + that.dateList[i].dateIndex
+ let _TempDt = that.toDateByStr1(_TempDtStr)
+ that.dateList[i].isRanges = false
+ if (rangeStartDate <= _TempDt && _TempDt <= rangeEndDate) //鏃堕棿鍦ㄨ寖鍥村唴
+ that.dateList[i].isRanges = true
+ }
+ },
+ clearRange() { //鍏抽棴鑼冨洿妯″紡鑼冨洿
+ let that = this
+ //寰幆鍒ゆ柇鑼冨洿
+ for (let i = 0; i < that.dateList.length; i++) {
+ that.dateList[i].isRanges = false
+ }
+ },
+ checkOutOfDate(time) { //鍒ゆ柇鏄惁瓒呭嚭鏃ユ湡鑼冨洿,yyyy-MM-dd
+ let that = this
+ let _dateStart = that.toDateByStr1(that.dateStart)
+ let _dateEnd = that.toDateByStr1(that.dateEnd)
+ let _tempDate = that.toDateByStr1(time)
+ if (_dateStart > _tempDate || _tempDate > _dateEnd) {
+ return true
+ } else
+ return false
+ },
+ checkDateRange(year, month, type) { //鍒ゆ柇鑼冨洿鐣岄檺鍊兼槸鍚﹀湪褰撴湀鍐�,yyyy-MM-dd,type锛�1 涓婇檺鍊�,鍏朵粬锛氫笅闄愬��
+ let that = this
+
+ let totalDay = that.getTotalDay(year + '/' + month + '/01')
+ let firstD = that.toDateByStr1(year + '/' + month + '/01')
+ let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay)
+
+ if (type == 1) { //涓婇檺鍊�
+ let _dateEnd = that.toDateByStr1(that.dateEnd)
+ if (firstD <= _dateEnd && _dateEnd <= lastD) {
+ return true
+ } else
+ return false
+ } else { //涓嬮檺鍊�
+ let _dateStart = that.toDateByStr1(that.dateStart)
+ if (firstD <= _dateStart && _dateStart <= lastD) {
+ return true
+ } else
+ return false
+ }
+ },
+ calendarTransform(x, time) { //鏃ュ巻婊戝姩鍔ㄧ敾
+ this.transform_x = x
+ this.transform_time = time
+ },
+ touchstart(event) {
+ if (!this.canDrag)
+ return
+ this.startPageX = event.touches[0].pageX
+ this.startPageY = event.touches[0].pageY
+ },
+ touchmove(event) {
+ if (!this.canDrag)
+ return
+ let touchmovePageX = event.touches[0].pageX
+ let result = touchmovePageX - this.startPageX
+ this.calendarTransform(result, 0)
+ },
+ touchend(event) {
+ if (!this.canDrag)
+ return
+ let that = this
+ let endPageX = event.changedTouches[0].pageX
+ let endPageY = event.changedTouches[0].pageY
+ let x = Math.abs(that.startPageX - endPageX) //妯潗鏍囦箣宸�
+ let y = Math.abs(that.startPageY - endPageY) //绾靛潗鏍囦箣宸�
+
+ let screenX = 0
+ try {
+ const res = uni.getSystemInfoSync()
+ screenX = res.windowWidth
+ } catch (e) {
+ console.error(e)
+ return
+ }
+ if (that.startPageX > endPageX) { //宸︽粦
+ let a = Math.atan(y / x)
+ let Rate = x / screenX
+ if (a < Math.PI / 6 && Rate > 0.3) {
+ screenX = -screenX
+ that.calendarTransform(screenX, 300)
+ setTimeout(function () {
+ that.addMonth()
+ that.calendarTransform(0, 0)
+ }, 300)
+ }
+ else {
+ that.calendarTransform(0, 300)
+ }
+ } else {
+ let a = Math.atan(y / x)
+ let Rate = x / screenX
+ if (a < Math.PI / 6 && Rate > 0.3) {
+ that.calendarTransform(screenX, 300)
+ setTimeout(function () {
+ that.subMonth()
+ that.calendarTransform(0, 0)
+ }, 300)
+ }
+ else {
+ that.calendarTransform(0, 300)
+ }
+ }
+ }
+ },
+ watch: {
+ currentTime: function (val, oldVal) { //鏃堕棿鏀瑰彉
+ let dateNew = this.toDateByStr1(val)
+ if (dateNew.getFullYear() == this.year && (dateNew.getMonth() + 1) == this.month) {
+ console.log('time is not change')
+ } else {
+ this.currentSelectTime = dateNew.getDate()
+ this.render()
+ }
+ },
+ range: function (val, oldVal) { //鑼冨洿鏀瑰彉
+ if (val.rangeStart != oldVal.rangeStart || val.rangeEnd != oldVal.rangeEnd) {
+ this.rangeStart_ = val.rangeStart
+ this.rangeEnd_ = val.rangeEnd
+ this.setRange()
+ }
+ },
+ mark: function (val, oldVal) { //鏍囪鏀瑰彉
+ this.render()
+ },
+ rangeMode: function (val, oldVal) { //鑼冨洿鏀瑰彉
+ if (!val) { //濡傛灉鏄叧闂寖鍥存ā寮�
+ this.rangeStart_ = undefined //鏍囪鑼冨洿寮�濮嬶紝yyyyMM-dd
+ this.rangeEnd_ = undefined //鏍囪鑼冨洿缁撴潫锛寉yyyMM-dd
+ this.firstRangeSelected = false
+ this.clearRange()
+ }
+ },
+ },
+ computed: {
+ transformObj: function () {
+ return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)'
+ },
+ transformTimeObj: function () {
+ return this.transform_time + 'ms'
+ }
+ },
+}
</script>
<style lang="scss">
-.calendar-Time-header{
- /* text-align: center;
+.calendar-Time-header {
+ /* text-align: center;
height: 50upx;
line-height: 50upx;
vertical-align: middle;
padding: 20upx; */
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20rpx;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20rpx;
}
.header-left {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.header-left image {
- width: 30rpx;
- height: 30rpx;
+ width: 30rpx;
+ height: 30rpx;
}
.header-left text {
- font-size: 32rpx;
- font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
- color: #222222;
- margin: 0 40rpx
+ font-size: 32rpx;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #222222;
+ margin: 0 40rpx;
}
.header-right {
- font-size: 28rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: $uni-color-primary;
+ font-size: 28rpx;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: $uni-color-primary;
}
-.calendar-TimeH{
+.calendar-TimeH {
}
-.calendar-lastMonth{
- width: 100upx;
- font-size: 35upx;
- margin-right: 10%;
- padding: 0 5px;
- text-align: center;
+.calendar-lastMonth {
+ width: 100upx;
+ font-size: 35upx;
+ margin-right: 10%;
+ padding: 0 5px;
+ text-align: center;
}
-.calendar-nextMonth{
- width: 100upx;
- text-align: center;
- margin-left: 10%;
- font-size: 35upx;
- padding: 0 5px;
+.calendar-nextMonth {
+ width: 100upx;
+ text-align: center;
+ margin-left: 10%;
+ font-size: 35upx;
+ padding: 0 5px;
}
-.calendar-backToToday{
- text-align: center;
- font-size: 24upx;
- position: absolute;
- right: 5px;
+.calendar-backToToday {
+ text-align: center;
+ font-size: 24upx;
+ position: absolute;
+ right: 5px;
}
.calendar-row:before,
.calendar-row:after {
- display: table;
- content: ' ';
+ display: table;
+ content: " ";
}
.calendar-row:after {
- clear: both;
+ clear: both;
}
.calendar-col {
- width: 14.285714%;
- max-width: 14.285714%;
- position: relative;
- float: left;
- font-weight: 500;
- min-height: 80upx;
- font-size: 28rpx;
- /* color: #999999; */
- color: #222222;
- white-space: nowrap;
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- overflow: hidden;
-
- display: flex;
- align-items: center;
- justify-content: center;
+ width: 14.285714%;
+ max-width: 14.285714%;
+ position: relative;
+ float: left;
+ font-weight: 600;
+ min-height: 80upx;
+ font-size: 28rpx;
+ /* color: #999999; */
+ color: #222222;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ overflow: hidden;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.aligncanter {
- text-align: center;
- /* border-bottom: 1rpx solid #E5E5E5; */
+ text-align: center;
+ /* border-bottom: 1rpx solid #E5E5E5; */
}
.calendar-header {
- color: gray;
- height: 40upx;
- line-height: 40upx;
- vertical-align: middle;
- font-size: 24upx;
+ color: gray;
+ height: 40upx;
+ line-height: 40upx;
+ vertical-align: middle;
+ font-size: 24upx;
}
.calendar-day {
- height: 80upx;
- transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+ height: 80upx;
+ transform: translate3d(0px, 0px, 0px) translateZ(0px);
+ transition-duration: 0ms;
+ transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
-
.calendar-content {
}
-.calendar-date{
- /* color: #000; */
+.calendar-date {
+ /* color: #000; */
}
.calendar-today {
- /* border-radius: 6upx;
+ /* border-radius: 6upx;
background-color: $uni-color-primary; */
- color: $uni-color-primary;
- /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;
+ color: $uni-color-primary;
+ /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;
-webkit-box-shadow: 0px 2upx 10upx #ABABAB;
box-shadow: 0px 2upx 10upx #ABABAB; */
}
-.calendar-today .calendar-point{
- color: white !important;
+.calendar-today .calendar-point {
+ color: white !important;
}
-.calendar-today .calendar-text{
- color: white !important;
+.calendar-today .calendar-text {
+ color: white !important;
}
-.calendar-col-lastMonth .calendar-text{
- color: gray;
+.calendar-col-lastMonth .calendar-text {
+ color: gray;
}
-.calendar-col-nextMonth .calendar-text{
- color: gray;
+.calendar-col-nextMonth .calendar-text {
+ color: gray;
}
/* .calendar-today .calendar-date{
@@ -838,83 +886,105 @@
} */
.calendar-active {
- color:#FFFFFF !important;
- background-color: $uni-color-primary;
- /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;
+ color: #ffffff !important;
+ background-color: $uni-color-primary;
+ /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;
-webkit-box-shadow: 0px 2upx 10upx #ABABAB;
box-shadow: 0px 2upx 10upx #ABABAB; */
}
/* 鑼冨洿鏍囪 */
.calendar-range {
- /* color:#01AAED; */
- border-radius: 0px;
- background-color: #D9D9D9;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
+ /* color:#01AAED; */
+ border-radius: 0px;
+ background-color: #d9d9d9;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
-
-
.ClearBoth {
- clear: both;
+ clear: both;
}
-.calendar-col-nextMonth{
- color:gray;
+.calendar-col-nextMonth {
+ color: gray;
}
-.calendar-col-lastMonth{
- color:gray;
+.calendar-col-lastMonth {
+ color: gray;
}
-.calendar-btn-disabled{
- color:gainsboro;
+.calendar-btn-disabled {
+ color: gainsboro;
}
-.calendar-point{
- width: 28rpx;
- height: 28rpx;
- box-sizing: border-box;
- background-color: #F62710;
- border-radius: 50%;
- font-size: 16upx;
- color: #FFFFFF;
- top:2upx;
- right: 2upx;
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
+.calendar-point {
+ width: 28rpx;
+ height: 28rpx;
+ box-sizing: border-box;
+ background-color: #f62710;
+ border-radius: 50%;
+ font-size: 16upx;
+ color: #ffffff;
+ top: 2upx;
+ right: 2upx;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.calendar-text{
- padding: 4rpx 0;
- width:100%;font-size: 20upx;color: #F62710;top:40upx;left: 0px;position: absolute;overflow:hidden;
+.calendar-text {
+ padding: 4rpx 0;
+ width: 100%;
+ font-size: 20upx;
+ color: #f62710;
+ top: 40upx;
+ left: 0px;
+ position: absolute;
+ overflow: hidden;
}
-.dayValue{
- text-align: center;
- /* color: #000000; */
+.dayValue {
+ text-align: center;
+ /* color: #000000; */
}
-.calendar-day-6-7{
- /* color: orangered; */
+.calendar-day-6-7 {
+ /* color: orangered; */
}
/* 瓒呭嚭鏃ユ湡鑼冨洿 */
-.calendar-out-of-Date{
- background-color: #EAEAEA;
+.calendar-out-of-Date {
+ background-color: #eaeaea;
}
-.calendar-out-of-Date .calendar-date{
- color: gray;
+.calendar-out-of-Date .calendar-date {
+ color: gray;
}
-
-
-
-
/* 浠ヤ笅涓哄疄鐜�0.5px搴曢儴杈圭晫 */
-.under_line{position: relative;}
+.under_line {
+ position: relative;
+}
.under_line:before,
-.under_line:after{position: absolute;content: " ";height: 1px;width: 100%;left: 0;transform-origin: 0 0;-webkit-transform-origin: 0 0;}
+.under_line:after {
+ position: absolute;
+ content: " ";
+ height: 1px;
+ width: 100%;
+ left: 0;
+ transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+}
/* .fineLine:before{椤堕儴top: 0;background: #000;} */
-.under_line:after{bottom: 0;}
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5){.under_line:after,.under_line:before{-webkit-transform: scaleY(.667);}}
-@media only screen and (-webkit-min-device-pixel-ratio: 2){.under_line:after,.under_line:before{-webkit-transform: scaleY(.5);}}
+.under_line:after {
+ bottom: 0;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+ .under_line:after,
+ .under_line:before {
+ -webkit-transform: scaleY(0.667);
+ }
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+ .under_line:after,
+ .under_line:before {
+ -webkit-transform: scaleY(0.5);
+ }
+}
/* 浠ヤ笂涓哄疄鐜�0.5px搴曢儴杈圭晫 */
</style>
--
Gitblit v1.9.3