微信小程序可滑动周日历组件

微信小程序@TOC

微信小程序可滑动周日历组件

看网上周日历组件比较少，自己弄了一个，和大家分享一下。
如果样式变形，请检查是否有共用样式起冲突

展示一下效果图

在components组件文件夹下新建calendarWeek文件夹
直接上代码吧：
index.wxml

<!--components/calendarWeek/index.wxml-->
<!-- 日历 -->
<view class="date-choose shrink border-bottom10">

  <picker mode="date" bindchange="tiaotime"><view class="data-month">{{dateYear}}{{dateMonth}}</view></picker>
  <swiper class="date-choose-swiper" circular="true"  indicator-dots="{{false}}" current="{{swiperCurrent}}" bindchange="dateSwiperChange">
    <block wx:for="{{dateList}}" wx:for-item="date" wx:key="date.id">
      <swiper-item class="swiper-item">
        <view class="weekday">
          <block wx:for-item="weekday" wx:for="{{dateListArray}}" wx:key="{{index}}">
            <text class="week">{{weekday}}</text>
          </block>
        </view>
        <view class="dateday">
          <block wx:for="{{date.days}}" wx:for-item="day" wx:key="{{day.id}}">
          <!-- <view>{{day.ids}}</view> -->
            <view class="day" id="{{day.id}}" bindtap="chooseDate"  >
              <text class="{{dateCurrentStr==day.id?'active':''}}{{today==day.id?' reds':''}}" >{{day.day}}</text>
            </view>
          </block>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>
<!-- 日历 -->

index.wxss

/* components/calendarWeek/index.wxss */

.date-choose {
  background: #fff;
  overflow: hidden;
  height: auto;
}
.data-month {
  width: 100%;
  align-items: center;
  padding: .35rem .35rem;
  text-align: left;
  color: #333;
  font-size: 38rpx;
}
.date-choose-swiper {
  flex-grow: 1;
  height: 182rpx;
}
.swiper-item {
  display: flex;
  flex-direction: column;
}
.weekday, .dateday {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  flex-grow: 1;
}
.week, .day {
  width: 14.286%;
  flex-basis: 14.286%;
}
.week{
  color: #999;
  font-size: 24rpx;
}
.day text {
  position: relative;
  color: #333333;
}
.day .active:before {/* 圈圈 */
  content: "";
  position: absolute;
  width: 76rpx;
  height: 76rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 1px solid red;
  border-radius: 100%;
  background: red;
  opacity: 0.1;
  z-index: -1;
}
.day text.active {
  color: red
}
.day text.reds {
  color: #ff0000;
}
/*开始*/

.headerone {
  width: 100%;
  height: auto;
  font-size: 24rpx;
  /* margin: 0 30rpx; */
}
.headerone .ra {
  margin-right: 20rpx;

}
.headerone .radio-group{
  margin: 20rpx 0 20rpx 30rpx;
}
.headertwo {
  width: 100%;
  height: auto;
  font-size: 24rpx;
  margin-top: 10rpx;
  margin-bottom: 26rpx;
}
.headertwo .le image {
  width: 70rpx;
  height: 70rpx;
  border-radius: 10px;
  margin-left: 30rpx;
  margin-right: 20rpx
}
.headertwo .ri {
  flex: 1;
  margin-right: 30rpx;
  border-radius: 6px;
  box-shadow:0px 1px 6px 0px rgba(198,198,198,0.5);
}
.headertwo .ri .one{
  width: 100%;
  padding-top: 24rpx;
  padding-bottom :24rpx
}
.headertwo .ri .one view .jiao {
   margin: 0 16rpx;
   border:15rpx solid;
   /* margin-top: 15rpx; */
  border-color: #ffffff #ffffff #b3b3b3 #ffffff;
}
.xi {
  background: red;
  color: #ffffff;
  padding:3px 10px;
  border-radius: 6px 0px 0 6px;

}
.headertwo .ri .one view view.jiaos {
   margin: 0 16rpx;
   border:15rpx solid;
    margin-top: 14rpx;
  border-color:#b3b3b3 #ffffff #ffffff  #ffffff;
}
.headertwo .ri .two{
  width: 100%;
    overflow: hidden;
    transition: all 0.5s
}
.headertwo .ri .two .body{
  width: 100%;
    /* padding-left: 60rpx; */
   /* padding-right: 22rpx; */
  padding-top: 24rpx;
  padding-bottom :24rpx;

}

index.js

// components/calendarWeek/index.js
var utils = require('./util.js')
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    valtime: 8,
    dateList: [],   // 日历数据数组
    swiperCurrent: 0, // 日历轮播正处在哪个索引位置
    dateCurrent: new Date(),  // 正选择的当前日期
    dateCurrentStr: '', // 正选择日期的 id
    dateMonth: '1月',  // 正显示的月份
    dateListArray: ['日', '一', '二', '三', '四', '五', '六'],
  },
  ready: function () {
    var that = this;
    var today = utils.formatTime2(new Date());
    this.setData({
      today,
    });
    var d = new Date();
    this.initDate(-5, 2, d); // 日历组件程序  -4左表示过去4周  右1表示过去一周

  },
  /**
   * 组件的方法列表
   */
  methods: {
    tiaotime(e) {
      let data = e.detail.value.split("-")
      var d = new Date(Number(data[0]), Number(data[1]) - 1, Number(data[2]));
      this.setData({
        dateList: []
      })
      this.initDate(-5, 2, d); // 日历组件程序  -4左表示过去4周  右1表示过去一周
    },
    onShow: function (e) {
      wx.getSystemInfo({
        success: (res) => {
          this.setData({
            windowHeight: res.windowHeight,
            windowWidth: res.windowWidth,
          });
        }
      });
    },

    // 日历组件部分
    // ----------------------------
    initDate(left, right, d) {
      var month = utils.addZero(d.getMonth() + 1),
        year = utils.addZero(d.getFullYear()),
        day = utils.addZero(d.getDate());
      for (var i = left; i <= right; i++) {
        this.updateDate(utils.DateAddDay(d, i * 7));//多少天之后的
      }
     
      this.setData({
        swiperCurrent: 5,
        dateCurrent: d,
        dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
        dateMonth: month + '月',
        dateYear: year + '年',
        dateCurrentStr: year + "-" + month + "-" + day,
      });
    },
    // 获取这周从周日到周六的日期
    calculateDate(_date) {
      var first = utils.FirstDayInThisWeek(_date);
      var d = {
        'month': first.getMonth() + 1,
        'days': [],

      };
      for (var i = 0; i < 7; i++) {
        var dd = utils.DateAddDay(first, i);
        var day = utils.addZero(dd.getDate()),
          year = utils.addZero(dd.getFullYear()),
          month = utils.addZero(dd.getMonth() + 1);

        d.days.push({
          'day': day,
          'id': dd.getFullYear() + '-' + month + '-' + day,
          'ids': dd.getFullYear() + ',' + month + ',' + day,
        });
      }
      return d;
    },
    // 更新日期数组数据
    updateDate(_date, atBefore) {
      var week = this.calculateDate(_date);
      if (atBefore) {
        this.setData({
          dateList: [week].concat(this.data.dateList),
        });
      } else {
        this.setData({
          dateList: this.data.dateList.concat(week),
        });
      }

    },
    // 日历组件轮播切换
    dateSwiperChange(e) {
      const lastIndex = this.data.swiperCurrent
        , currentIndex = e.detail.current
        , dateList = this.data.dateList
        , dateListlen = this.data.dateList.length
      let flag = false
        , key = 'lastMonth' //判断是左划还是右
      // console.log(lastIndex , currentIndex)
      if (lastIndex > currentIndex) {
        lastIndex === 7 && currentIndex === 0
          ? flag = true
          : null

      } else {
        lastIndex === 0 && currentIndex === 7
          ? null
          : flag = true
      }
      if (flag) {
        key = 'nextMonth'
      }
      if (key == 'lastMonth') {
        let nowindex = currentIndex - 3;
        let uptime = currentIndex - 4;
        let a = 0;
        if (nowindex < 0) { nowindex = nowindex + 8; a = 0 }
        if (uptime < 0) { uptime = uptime + 8 }

        let seltime = dateList[nowindex].days[a].ids
        var week = this.calculateDate(utils.formatTime(utils.DateAddDay(seltime, -1)));

        dateList[uptime] = week
        this.setData({
          dateList: dateList
        })

      }
      if (key == 'nextMonth') {
        let indexne = 0
        let aa = 0
        if (currentIndex == 7) { //要更新的下标
          indexne = 0
          aa = 1
        } else {
          indexne = currentIndex + 1
          aa = currentIndex + 2
        }
        if (aa == 8) {
          aa = 0
        }
        //aa 要更新的数组下标 datanex要往后查询一周的日期
        let datanex = dateList[indexne].days[6].ids
        //获取下一周的
        var week = this.calculateDate(utils.formatTime(utils.DateAddDay(datanex, 1)));
        dateList[aa] = week
     
        this.setData({
          dateList: dateList
        })
      }

      var d = this.data.dateList[currentIndex];
      let da = new Date(d.days[0].ids)
      this.setData({
        swiperCurrent: currentIndex,
        dateMonth: d.month + '月',
        dateYear: da.getFullYear()+"年"
      })

    },
    // 获得日期字符串
    getDateStr: function (arg) {
      if (utils.type(arg) == 'array') {
        return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00';
      } else if (utils.type(arg) == 'date') {
        return arg.getFullYear() + '-' + (arg.getMonth() + 1) + '-' + arg.getDate() + ' 00:00:00';
      } else if (utils.type(arg) == 'object') {
        return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00';
      }
    },

    // 点击日历某日
    chooseDate(e) {
      var str = e.currentTarget.id;
      // console.log(str);
      this.setData({ dateCurrentStr: str });
      this.triggerEvent('mydata', { data: str })
    },
  }
})

要引入util.js

// 时间格式转换 yyyy/mm/dd
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
// 时间格式转换 yyyy－mm－dd
function formatTime2(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('-') 
}

function formatDate(date, split) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  return [year, month, day].map(formatNumber).join(split || '')
}

// 两位数自动补零
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

// 两位数以内的数字自动补零
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}


// 计算变化多少天后的日期
function DateAddDay(d, days) {
 
  var d = new Date(d);
  return new Date(d.setDate(d.getDate() + days));
}
// 获得本周周日的日期
function FirstDayInThisWeek(d) {
  
  var d = new Date(d);
  // console.log(formatTime(DateAddDay(d, 0 - d.getDay())));
  return DateAddDay(d, 0 - d.getDay());
}

// 判断类型
function Type(obj) {
  var typeStr = Object.prototype.toString.call(obj).split(" ")[1];
  return typeStr.substr(0, typeStr.length - 1).toLowerCase();
}

module.exports = {
  formatTime: formatTime,
  formatDate: formatDate,
  formatTime2,
  DateAddDay: DateAddDay,
  FirstDayInThisWeek: FirstDayInThisWeek,
  type: Type,
  addZero: formatNumber,
}

调用组件

//json文件调用
"usingComponents": {
    "calendarMonth": "../../components/calendarWeek/index"
}
页面调用组件
 //mydata触发的点击日期时触发的事件 可获取当前点击的日期
 <calendarMonth bindmydata="mydata"></calendarMonth>
当前页面js
//js里的事件
 mydata(e){ //可获取日历点击事件
    let data = e.detail.data
    console.log(data)
}

本组件仅为本人使用，如有问题希望大家及时反馈