css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 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 是否显示农历，mask优先级高

          */

         showLunar: {

            type: Boolean,

            default: true

         },

         /**

          * @description 设置标记范围

          */

         range: {

            type: Object,

            default: function() {

               return {

                  rangeStart: undefined, //设置标记范围开始，yyyy-MM-dd

                  rangeEnd: undefined //设置标记范围结束，yyyy-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, //标记范围结束，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 _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 是否显示农历，mask优先级高

     */

    showLunar: {

      type: Boolean,

      default: true

    },

    /**

     * @description 设置标记范围

     */

    range: {

      type: Object,

      default: function () {

        return {

          rangeStart: undefined, //设置标记范围开始，yyyy-MM-dd

          rangeEnd: undefined //设置标记范围结束，yyyy-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, //标记范围结束，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 _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) { //字符串转换时间，转换失败或者不传字符串则null

            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) { //字符串转换时间，转换失败或者不传字符串则null

      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; //标记范围结束，yyyyMM-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 //标记范围结束，yyyyMM-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>