微信小程序横向日历

在此只是记录一下

原网址:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3510&fromuid=2

不多bb,直接上代码
wxml

<view class="date-choose shrink">
  <view class="data-month">{{dateMonth}}</view>
  <swiper class="date-choose-swiper" 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}}">
            <text class="day" id="{{day.id}}" bindtap="chooseDate">
              <text class="{{dateCurrentStr==day.id?'active':''}}">{{day.day}}</text>
            </text>
          </block>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

wxss:

.date-choose {
  background: #fff;
  overflow: hidden;
  box-shadow:0px 1px 1px 0px rgba(198,198,198,0.5);
  height: 260rpx;
}
.data-month {
  width: 2.6em;
  align-items: center;
  padding: .35rem .35rem;
  text-align: center;
  /* box-shadow: 2px 0 5px rgba(0,0,0,.4); */
  color: #333;
  font-size: 48rpx;
}
.date-choose-swiper {
  flex-grow: 1;
  height: 4em;
}
.swiper-item {
  display: flex;
  flex-direction: column;
}
.weekday, .dateday {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}
.week, .day {
  width: 14.286%;
  flex-basis: 14.286%;
}
.week{
  color: #999;
  font-size: 24rpx;
}
.day text {
  position: relative;
  color: #009bff;
}
.day .active:before {/* 圈圈 */
  content: "";
  position: absolute;
  width: 76rpx;
  height: 76rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /* border: 2px solid #000; */
  border-radius: 100%;
  background: #E0F3FF;
  z-index: -1;
}

js

 //index.js
//获取应用实例
// var app = getApp()
var utils = require('../../utils/util.js')
Page({
  data: {
    dateList: [],   // 日历数据数组
    swiperCurrent: 0, // 日历轮播正处在哪个索引位置
    dateCurrent: new Date(),  // 正选择的当前日期
    dateCurrentStr: '', // 正选择日期的 id
    dateMonth: '1月',  // 正显示的月份
    dateListArray: ['日','一','二','三','四','五','六'],
  },
  onLoad (option) {
    var that = this;
    // this.loading();
    this.initDate(); // 日历组件程序
  },
  onShow: function( e ) {
    // this.loading('close');
    wx.getSystemInfo( {
      success: ( res ) => {
        this.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
        });
      }
    });
  },
  // 日历组件部分
  // ----------------------------
  initDate () {
    var d = new Date();
    var month = utils.addZero(d.getMonth()+1),
        day = utils.addZero(d.getDate());
    for(var i=-5; i<=5; i++) {
      this.updateDate(utils.DateAddDay(d, i*7));//多少天之后的
    }
    this.setData({
      swiperCurrent: 5,
      dateCurrent: d,
      dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
      dateMonth: month + '月',
    });
  },
  // 获取这周从周日到周六的日期
  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()),
          month = utils.addZero(dd.getMonth()+1);
      d.days.push({
        'day': day,
        'id': 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) {
    var index = e.detail.current;
    var d = this.data.dateList[index];
    this.setData({
      swiperCurrent: index,
      dateMonth: d.month + '月',
    });
  },
  // 获得日期字符串
  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.target.id;
    console.log(str);
    this.setData({dateCurrentStr: 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(':')
}

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,
  DateAddDay: DateAddDay,
  FirstDayInThisWeek: FirstDayInThisWeek,
  type: Type,
  addZero: formatNumber,
}

**
**