css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/components/Li-Calendar/Li-Calendar.vue

@@ -1,11 +1,15 @@
<template>

   <view>

      <view class='calendar-Time-header under_line'>

    <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>

        <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>

@@ -13,7 +17,7 @@
         <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="ClearBoth"></view>

      <view class="calendar-content">

         <view class="calendar-row calendar-header">

            <view class="calendar-col aligncanter">周日</view>

@@ -24,28 +28,71 @@
            <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

        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

          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

          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>

@@ -65,8 +112,8 @@
         currentTime: {

            type: String,

            default: function() {

               let timeObj = new Date();

               return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate();

        let timeObj = new Date()

        return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate()

            }

         },

         /**

@@ -81,7 +128,7 @@
         mark: {

            type: Array,

            default: function() {

               return undefined;

        return undefined

            }

         },

         /**

@@ -154,7 +201,7 @@
         },

      },

      created() {

         this.render();

    this.render()

      },

      data() {

         return {

@@ -175,114 +222,114 @@
            rangeEnd_: undefined, //标记范围结束，yyyyMM-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 that = this

      let currentTimeStr = setTimeStr ? setTimeStr : that.currentTime

      let timeObj = this.toDateByStr(currentTimeStr) //当前选定的时间

            //计算头部显示的年月

            let _tempTileMonth = (timeObj.getMonth() + 1);

      let _tempTileMonth = (timeObj.getMonth() + 1)

            if (_tempTileMonth < 10)

               _tempTileMonth = '0' + _tempTileMonth;

            this.title_time = timeObj.getFullYear() + "年" + _tempTileMonth + "月";

        _tempTileMonth = '0' + _tempTileMonth

      this.title_time = timeObj.getFullYear() + "年" + _tempTileMonth + "月"



            //获取当前时间月份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 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;

      let TempMonth

      let TempYear

            if (that.month == 1) { //跨年

               TempMonth = 12;

               TempYear = that.year - 1;

        TempMonth = 12

        TempYear = that.year - 1

            } else {

               TempYear = that.year;

               TempMonth = that.month - 1;

        TempYear = that.year

        TempMonth = that.month - 1

            }

            let TempLastMonthStr = TempYear + "/" + TempMonth + "/01";

            let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr);

            let lastMonthStartDay = lastMonthTotalDay - firstDayWeek;

      let TempLastMonthStr = TempYear + "/" + TempMonth + "/01"

      let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr)

      let lastMonthStartDay = lastMonthTotalDay - firstDayWeek



            let _dateStart = that.toDateByStr1(that.dateStart);

            let _dateEnd = that.toDateByStr1(that.dateEnd);

      let _dateStart = that.toDateByStr1(that.dateStart)

      let _dateEnd = that.toDateByStr1(that.dateEnd)

            // 创建前面的日期

            that.beforeDateList = [];

      that.beforeDateList = []

            for (let i = 0; i < firstDayWeek; i++) {

               grid_sum++;

               lastMonthStartDay++;

        grid_sum++

        lastMonthStartDay++

               let tempObj = {

                  dateIndex: lastMonthStartDay,

                  key: 'before_' + i

               };

        }



               //判断是否超出日期范围

               let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay);

        let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay)

               if (_dateStart > _tempBeforeDate || _tempBeforeDate > _dateEnd) {

                  tempObj.outOfDate = true;

          tempObj.outOfDate = true

               }



               //获取农历

               if (that.showLunar) {

                  let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay);

                  let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;

                  tempObj.markText = tempLunarDay;

          let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay)

          let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay

          tempObj.markText = tempLunarDay

               }



               that.beforeDateList.push(tempObj);

        that.beforeDateList.push(tempObj)

            }



            //获取一个月的天数

            let totalDay = that.getTotalDay(currentTimeStr);

      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 = [];

      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++;

        grid_sum++



               let tempObj = {

                  dateIndex: i,

                  key: 'date_' + i,

                  isRanges: false,

                  isToday: false

               };

        }

               //当前日期变量

               let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i);

        let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i)



               //判断是否为当天

               if (today_year == that.year && today_month == that.month && today_day == i)

                  tempObj.isToday = true;

          tempObj.isToday = true



               //周六和周日，特殊处理

               let tempCurrWeek = tempDay.getDay();

        let tempCurrWeek = tempDay.getDay()

               if (tempCurrWeek == 0 || tempCurrWeek == 6)

                  tempObj.isDaySunOrSat = true;

          tempObj.isDaySunOrSat = true



               //判断是否超出日期范围

               if (_dateStart > tempDay || tempDay > _dateEnd) {

                  tempObj.outOfDate = true;

          tempObj.outOfDate = 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 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'

               }



               //设置了标记点

@@ -292,126 +339,126 @@
                     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;

                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;

                tempObj.markText = tempTextStr

                tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor : undefined

                        }

                        break;

              break

                     }

                  }

               }



               that.dateList.push(tempObj);

        that.dateList.push(tempObj)

            }



            that.setRange();

      that.setRange()



            // 创建后面的空白，补够五行

            that.afterDateList = [];

      that.afterDateList = []

            if (grid_sum < 42) { // 创建后面的空白，补够五行

               let j = 0;

        let j = 0



               //获取下一月

               let TempMonthNext;

               let TempYearNext;

        let TempMonthNext

        let TempYearNext

               if (that.month == 12) { //跨年

                  TempMonthNext = 1;

                  TempYearNext = that.year + 1;

          TempMonthNext = 1

          TempYearNext = that.year + 1

               } else {

                  TempYearNext = that.year;

                  TempMonthNext = that.month + 1;

          TempYearNext = that.year

          TempMonthNext = that.month + 1

               }



               for (let i = grid_sum; i < 42; i++) {

                  j++;

          j++



                  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 LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j)

            let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay

            tempObj.markText = tempLunarDay

                  }



                  //判断是否超出日期范围

                  let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j);

          let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j)

                  if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {

                     tempObj.outOfDate = true;

            tempObj.outOfDate = true

                  }



                  that.afterDateList.push(tempObj);

          that.afterDateList.push(tempObj)

               }

            }

         },

         sloarToLunar(year,month,day){

            // console.log('----')

            // console.log(year + "--" +month+ "--" + day)

            let result = lunarYearTool.sloarToLunar(year,month,day);

      let result = lunarYearTool.sloarToLunar(year, month, day)

            //console.log(result)

            return result;

      return result

         },

         getTotalDay(time) { //获取月 日期总数

            time = time.replace(/-/g, "/");

            let selectedDate = new Date(time);

      time = time.replace(/-/g, "/")

      let selectedDate = new Date(time)

            if (selectedDate == "Invalid Date") {

               selectedDate = new Date(time + "/01");

        selectedDate = new Date(time + "/01")

            }

            

            let dayMany = new Date(selectedDate.getFullYear(),(selectedDate.getMonth() + 1), 0).getDate()

            return dayMany;

      return dayMany

         },

         toDateByStr(timeStr) { //字符串转换时间，转换失败或者不传字符串则返回当前

            let timeObj;

      let timeObj

            if (timeStr) {

               timeObj = new Date(timeStr.replace(/-/g, "/"));

        timeObj = new Date(timeStr.replace(/-/g, "/"))

            }

            if (!timeStr || timeObj == "Invalid Date")

               timeObj = new Date();

            return timeObj;

        timeObj = new Date()

      return timeObj

         },

         toDateByStr1(timeStr) { //字符串转换时间，转换失败或者不传字符串则null

            try {

               let timeObj;

        let timeObj

               if (timeStr) {

                  timeObj = new Date(timeStr.replace(/-/g, "/"));

          timeObj = new Date(timeStr.replace(/-/g, "/"))

               }

               if (!timeStr || timeObj == "Invalid Date")

                  return null;

               return timeObj;

          return null

        return timeObj

            } catch (e) {

               return null;

        return null

            }

         },

         getTimeStrFormat(timeStr) { //获取格式化的时间 yyyy-MM-dd

            let timeObj;

      let timeObj

            if (timeStr) {

               timeObj = new Date(timeStr.replace(/-/g, "/"));

        timeObj = new Date(timeStr.replace(/-/g, "/"))

            }

            if (!timeStr || timeObj == "Invalid Date")

               timeObj = new Date();

            return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate();

        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 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)



            //判断是否超出日期范围

            if (that.checkOutOfDate(selectObj.time)) {

               return;

        return

            }



            that.currentSelectTime = index;

      that.currentSelectTime = index

            

            console.log(index)



@@ -419,279 +466,279 @@
            if (that.rangeMode) {

               if (!that.firstRangeSelected) { //选择开始时间

                  that.firstRangeSelected = !that.firstRangeSelected

                  that.rangeStart_ = selectObj.time;

                  that.rangeEnd_ = undefined;

                  that.clearRange();

          that.rangeStart_ = selectObj.time

          that.rangeEnd_ = undefined

          that.clearRange()

               } else { //选择了结束时间

                  that.rangeEnd_ = selectObj.time;

          that.rangeEnd_ = selectObj.time

                  that.firstRangeSelected = !that.firstRangeSelected

                  that.$emit('rangeChange', {

                     start: that.rangeStart_,

                     end: that.rangeEnd_,

                  });

                  that.setRange();

          })

          that.setRange()

               }

            }

         },

         addMonth() { //加一个月

            let that = this;

      let that = this

            that.currentSelectTime = ''

            let _Month = that.month;

            let _Year = that.year;

      let _Month = that.month

      let _Year = that.year

            if (that.month == 12) { //跨年

               _Month = 1;

               _Year += 1;

        _Month = 1

        _Year += 1

            } else {

               _Month += 1;

        _Month += 1

            }



            let str = _Year + "/" + _Month + "/01";

      let str = _Year + "/" + _Month + "/01"



            //判断是否超出日期范围

            if (that.checkOutOfDate(str)) {

               that.nextDisabled = true;

               return;

        that.nextDisabled = true

        return

            }



            that.month = _Month;

            that.year = _Year;

            that.lastDisabled = false;

      that.month = _Month

      that.year = _Year

      that.lastDisabled = false



            //检查日期上限值是否在当月内，如果在则不能再切换下个月

            if (that.checkDateRange(that.year, that.month, 1)) {

               that.nextDisabled = true;

        that.nextDisabled = true

            }



            if (that.rangeMode) { //开启了范围模式

               that.currentSelectTime = undefined;

        that.currentSelectTime = undefined

            }



            that.$emit('monthChange', {

               date: str

            });

            that.render(str);

      })

      that.render(str)

         },

         subMonth() { //减一个月

            let that = this;

      let that = this

            

            that.currentSelectTime = ''



            let _Month = that.month;

            let _Year = that.year;

      let _Month = that.month

      let _Year = that.year

            if (that.month == 1) { //跨年

               _Month = 12;

               _Year -= 1;

        _Month = 12

        _Year -= 1

            } else {

               _Month -= 1;

        _Month -= 1

            }



            let str = _Year + "/" + _Month + "/01";

      let str = _Year + "/" + _Month + "/01"



            //判断是否超出日期范围

            let _totalDay = that.getTotalDay(str);

      let _totalDay = that.getTotalDay(str)

            if (that.checkOutOfDate(_Year + "/" + _Month + "/" + _totalDay)) {

               that.lastDisabled = true;

               return;

        that.lastDisabled = true

        return

            }



            that.month = _Month;

            that.year = _Year;

            that.nextDisabled = false;

      that.month = _Month

      that.year = _Year

      that.nextDisabled = false



            //检查日期下限值是否在当月内，如果在则不能再切换上个月

            if (that.checkDateRange(that.year, that.month)) {

               that.lastDisabled = true;

        that.lastDisabled = true

            }



            if (that.rangeMode) { //开启了范围模式

               that.currentSelectTime = undefined;

        that.currentSelectTime = undefined

            }



            that.$emit('monthChange', {

               date: str

            });

            that.render(str);

      })

      that.render(str)

         },

         backToToday() { //回到今天

            let currDate = new Date();

            let _year = currDate.getFullYear();

            let _month = currDate.getMonth() + 1;

      let currDate = new Date()

      let _year = currDate.getFullYear()

      let _month = currDate.getMonth() + 1



            this.currentSelectTime = getDay().day

            

            this.$emit('dayChange', { time: getDay().date });

      this.$emit('dayChange', { time: getDay().date })



            //如果已经是当月

            if (_year == this.year && _month == this.month) {

               return;

        return

            }

            

            let value = _year + "/" + _month + "/" + currDate.getDate();

      let value = _year + "/" + _month + "/" + currDate.getDate()

            this.$emit('monthChange', {

               date: value

            });

      })

            this.lastDisabled = true

            

            this.render(value);

      this.render(value)

         },

         setRange() { //设置范围

            let that = this;

            let rangeStartDate = that.toDateByStr1(that.rangeStart_);

            let rangeEndDate = that.toDateByStr1(that.rangeEnd_);

      let that = this

      let rangeStartDate = that.toDateByStr1(that.rangeStart_)

      let rangeEndDate = that.toDateByStr1(that.rangeEnd_)

            if (!rangeStartDate || !rangeEndDate)

               return;

        return

            if (rangeStartDate > rangeEndDate) { //防止范围出错

               let tempD = rangeEndDate;

               rangeEndDate = rangeStartDate;

               rangeStartDate = tempD;

        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;

        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;

          that.dateList[i].isRanges = true

            }

         },

         clearRange() { //关闭范围模式范围

            let that = this;

      let that = this

            //循环判断范围

            for (let i = 0; i < that.dateList.length; i++) {

               that.dateList[i].isRanges = false;

        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);

      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;

        return true

            } else

               return false;

        return false

         },

         checkDateRange(year, month, type) { //判断范围界限值是否在当月内,yyyy-MM-dd,type；1 上限值,其他：下限值

            let that = this;

      let that = this



            let totalDay = that.getTotalDay(year + '/' + month + '/01');

            let firstD = that.toDateByStr1(year + '/' + month + '/01');

            let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay);

      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);

        let _dateEnd = that.toDateByStr1(that.dateEnd)

               if (firstD <= _dateEnd && _dateEnd <= lastD) {

                  return true;

          return true

               } else

                  return false;

          return false

            } else { //下限值

               let _dateStart = that.toDateByStr1(that.dateStart);

        let _dateStart = that.toDateByStr1(that.dateStart)

               if (firstD <= _dateStart && _dateStart <= lastD) {

                  return true;

          return true

               } else

                  return false;

          return false

            }

         },

         calendarTransform(x,time){  //日历滑动动画

            this.transform_x = x;

            this.transform_time = 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;

        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);

        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); //纵坐标之差

        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;

      let screenX = 0

            try {

                const res = uni.getSystemInfoSync();

                screenX = res.windowWidth;

        const res = uni.getSystemInfoSync()

        screenX = res.windowWidth

            } catch (e) {

               console.error(e)

               return;

        return

            }

            if (that.startPageX > endPageX) { //左滑

               let a = Math.atan(y / x);

               let Rate = x / screenX;

        let a = Math.atan(y / x)

        let Rate = x / screenX

               if (a < Math.PI / 6 && Rate > 0.3) {

                  screenX = -screenX;

                  that.calendarTransform(screenX,300);

          screenX = -screenX

          that.calendarTransform(screenX, 300)

                  setTimeout(function(){

                     that.addMonth();

                     that.calendarTransform(0,0);

                  },300);

            that.addMonth()

            that.calendarTransform(0, 0)

          }, 300)

               }

               else{

                  that.calendarTransform(0,300);

          that.calendarTransform(0, 300)

               }

            } else {

               let a = Math.atan(y / x);

               let Rate = x / screenX;

        let a = Math.atan(y / x)

        let Rate = x / screenX

               if (a < Math.PI / 6 && Rate > 0.3) {

                  that.calendarTransform(screenX,300);

          that.calendarTransform(screenX, 300)

                  setTimeout(function(){

                     that.subMonth();

                     that.calendarTransform(0,0);

                  },300);

            that.subMonth()

            that.calendarTransform(0, 0)

          }, 300)

               }

               else{

                  that.calendarTransform(0,300);

          that.calendarTransform(0, 300)

               }

            }

         }

      },

      watch: {

         currentTime: function(val, oldVal) { //时间改变

            let dateNew = this.toDateByStr1(val);

      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();

        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();

        this.rangeStart_ = val.rangeStart

        this.rangeEnd_ = val.rangeEnd

        this.setRange()

            }

         },

         mark: function(val, oldVal) { //标记改变

            this.render();

      this.render()

         },

         rangeMode: function(val, oldVal) { //范围改变

            if (!val) { //如果是关闭范围模式

               this.rangeStart_ = undefined; //标记范围开始，yyyyMM-dd

               this.rangeEnd_ = undefined; //标记范围结束，yyyyMM-dd

               this.firstRangeSelected = false;

        this.rangeStart_ = undefined //标记范围开始，yyyyMM-dd

        this.rangeEnd_ = undefined //标记范围结束，yyyyMM-dd

        this.firstRangeSelected = false

               this.clearRange()

            }

         },

      },

      computed: {

         transformObj:function () { 

            return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)';

      return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)'

         },

         transformTimeObj:function () {

            return this.transform_time + 'ms';

      return this.transform_time + 'ms'

         }

      },

   }

@@ -723,7 +770,7 @@
   font-family: PingFangSC-Semibold, PingFang SC;

   font-weight: 600;

   color: #222222;

   margin: 0 40rpx

  margin: 0 40rpx;

}

.header-right {

   font-size: 28rpx;

@@ -757,7 +804,7 @@
.calendar-row:before,

.calendar-row:after {

   display: table;

   content: ' ';

  content: " ";

}



.calendar-row:after {

@@ -769,7 +816,7 @@
   max-width: 14.285714%;

   position: relative;

   float: left;

   font-weight: 500;

  font-weight: 600;

   min-height: 80upx;

   font-size: 28rpx;

   /* color: #999999; */

@@ -799,9 +846,10 @@


.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);

  transform: translate3d(0px, 0px, 0px) translateZ(0px);

  transition-duration: 0ms;

  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

}





.calendar-content {

}

@@ -838,7 +886,7 @@
} */



.calendar-active {

   color:#FFFFFF !important;

  color: #ffffff !important;

   background-color: $uni-color-primary;

   /* -moz-box-shadow: 0px 2upx 10upx #ABABAB;

   -webkit-box-shadow: 0px 2upx 10upx #ABABAB;

@@ -848,13 +896,11 @@
.calendar-range {

   /* color:#01AAED; */

   border-radius: 0px;

   background-color: #D9D9D9;

  background-color: #d9d9d9;

   -moz-box-shadow: none;

   -webkit-box-shadow: none;

   box-shadow: none;

}







.ClearBoth {

   clear: both;

@@ -872,10 +918,10 @@
   width: 28rpx;

   height: 28rpx;

   box-sizing: border-box;

   background-color: #F62710;

  background-color: #f62710;

   border-radius: 50%;

   font-size: 16upx;

   color: #FFFFFF;

  color: #ffffff;

   top:2upx;

   right: 2upx;

   position: absolute;

@@ -885,7 +931,13 @@
}

.calendar-text{

   padding: 4rpx 0;

   width:100%;font-size: 20upx;color: #F62710;top:40upx;left: 0px;position: absolute;overflow:hidden;

  width: 100%;

  font-size: 20upx;

  color: #f62710;

  top: 40upx;

  left: 0px;

  position: absolute;

  overflow: hidden;

}

.dayValue{

   text-align: center;

@@ -898,23 +950,41 @@


/* 超出日期范围 */

.calendar-out-of-Date{

   background-color: #EAEAEA;

  background-color: #eaeaea;

}

.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>