微信小程序日期选择器实现-优快云博客

微信小程序项目，遇到这么个需求。效果图如下：

每页显示4个周的日期，可点击日期时间段，也可点击左右箭头图标进行日期翻页，这一块其实就是推算日期，把每个周的起始时间和结束时间推算出来，并正确显示出来就行了。默认（未进行左右翻页）第一个周的起始时间为当前时间即可。

var self;
var day = 0;
var page = 0;
var weekArr = [];

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: [],
    clickIndex: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    self = this;
    self.getWeekArr(day);
  },

  /**
   * 点击日期
   */

  clickItem(e) {
    self.setData({
      clickIndex: e.currentTarget.dataset.index,
    });
    console.log(e.currentTarget.dataset.week_start + '-' + e.currentTarget.dataset.week_end);
  },

  /**
   * 后退
   */
  left() {
    page--;
    day = page * 28;
    self.getWeekArr(day);
  },

  /**
   * 前进
   */
  right() {
    page++;
    day = page * 28;
    self.getWeekArr(day);
  },


  /**
   * 获取周数据
   */
  getWeekArr(day) {
    weekArr.splice(0, weekArr.length);
    for (var i = 0; i < 4; i++) {
      var week = {
        'week_start': self.getDay(day),
        'week_end': self.getDay(day + 6),
      };
      weekArr.push(week);
      day += 7;
    }
    self.setData({
      arr: weekArr,
      clickIndex: 0,
    });
    console.log(self.data.arr);
    var week = self.data.arr[0];
    console.log(week.week_start + '-' + week.week_end);
  },

/**
 * 计算日期
 */
  getDay(day){
    var date = new Date();
    var milliseconds = date.getTime() + 1000 * 60 * 60 * 24 * day;
    date.setTime(milliseconds);
    var month = date.getMonth() + 1;
    var day = date.getDate();
    return month + "." + day;
  },
})

<view class='container'>
  <image src='../image/zuojiantou.png' class='arrow' bindtap='left'></image>
  <view class='date_container'>
    <view class="item {{clickIndex==index?'active':''}}" wx:for='{{arr}}' wx:key='{{item}}' 
    bindtap='clickItem' data-index='{{index}}' data-week_start='{{item.week_start}}' data-week_end='{{item.week_end}}'>
      {{item.week_start}}-{{item.week_end}}
    </view>
  </view>
  <image src='../image/youjiantou.png' class='arrow' bindtap='right'></image>
</view>

.container {
  display: flex;
  height: 200rpx;
  align-content: center;
  align-items: center;
}

.arrow {
  width: 70rpx;
  height: 70rpx;
}

.date_container {
  flex: 1;
  display: flex;
  align-items: center;
}

.item {
  width: 150rpx;
  height: 150rpx;
  font-size: 26rpx;
  background-color: #f00;
  text-align: center;
  color: white;
  line-height: 150rpx;
  border-radius: 50%;
  margin-left: 10rpx;
}

.active {
  width: 160rpx;
  height: 160rpx;
  background-color: blue;
  line-height: 160rpx;
}

——————————————————————————————————————————————————————————

还有一种是日历效果，效果图如下：

具体样式跟调整css来自定义。这里我是以弹窗的形式展示的。

<button type='primary' bindtap='showCalendar'>展示日历</button>

<view class='mask' hidden='{{show_calendar}}' bindtap='closeCalendar' catchtouchmove='true'>
  <view class='dialog'>
    <view class="calendar">
      <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
        <image src='../image/arrow_left.png' class='arrow'></image>
      </view>
      <view class="centerView">{{cur_year}} 年 {{cur_month}} 月</view>
      <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
        <image src='../image/arrow_right.png' class='arrow'></image>
      </view>
    </view>

    <view class="weekBgView">
      <view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}">{{item}}</view>
    </view>

    <view class="dateBgView">
      <view class='emptyView' wx:if="{{hasEmptyGrid}}" wx:for="{{empytGrids}}" wx:key="{{index}}"></view>
      <view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
        <view>
          <view class="datesView {{index==todayIndex?'dateSelectView':''}}">{{item.day}}</view>
          <view class='red_point_container'>
            <view wx:if='{{item.haveMeeting}}' class='red_point'></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
}

.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}

.calendar {
  height: 80rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leftBgView {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 40rpx;
  height: 40rpx;
}

.centerView {
  width: 50%;
  height: 80rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rightBgView {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weekBgView {
  height: 50rpx;
  display: flex;
  align-items: center;
}

.weekView {
  width: 14.2857%;
  text-align: center;
  font-size: 28rpx;
}

.dateBgView {
  display: flex;
  flex-wrap: wrap;
}

.emptyView {
  width: 14.2857%;
}

.dateView {
  width: 14.2857%;
  height: 80rpx;
  display: flex;
  justify-content: center;
}

.datesView {
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  font-size: 26rpx;
  display: flex;
  justify-content: center;
}

.dateSelectView {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  line-height: 56rpx;
  color: white;
  text-align: center;
  background-color: green;
}

.red_point_container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.red_point {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: red;
}

var arr = [];
var self;
Page({

  data: {
    hasEmptyGrid: false,
    cur_year: '',
    cur_month: '',
    show_calendar: true,
  },

  onLoad(options) {
    self = this;
    //1、2、25号添加圆点儿标识
    arr.push(1);
    arr.push(2);
    arr.push(25);
    self.setNowDate();
  },

  dateSelectAction(e) {
    var cur_day = e.currentTarget.dataset.idx;
    this.setData({
      todayIndex: cur_day,
      show_calendar: true,
    })
    console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
  },

  setNowDate() {
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const todayIndex = date.getDate() - 1;
    const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
    this.calculateEmptyGrids(cur_year, cur_month);
    this.calculateDays(cur_year, cur_month);
    this.setData({
      cur_year: cur_year,
      cur_month: cur_month,
      weeks_ch,
      todayIndex,
    })
  },

  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },

  getFirstDayOfWeek(year, month) {
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },

  calculateEmptyGrids(year, month) {
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    let empytGrids = [];
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        empytGrids.push(i);
      }
      this.setData({
        hasEmptyGrid: true,
        empytGrids
      });
    } else {
      this.setData({
        hasEmptyGrid: false,
        empytGrids: []
      });
    }
  },

  calculateDays(year, month) {
    let days = [];
    const thisMonthDays = this.getThisMonthDays(year, month);
    for (let i = 1; i <= thisMonthDays; i++) {
      days.push({
        day: i,
        haveMeeting: arr.indexOf(i) != -1,
      });
    }
    this.setData({
      days
    });
  },

  handleCalendar(e) {
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;
    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      if (newMonth < 1) {
        newYear = cur_year - 1;
        newMonth = 12;
      }
      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      if (newMonth > 12) {
        newYear = cur_year + 1;
        newMonth = 1;
      }
      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
      this.setData({
        cur_year: newYear,
        cur_month: newMonth
      })
    }
  },

  /**
   * 显示日历
   */
  showCalendar() {
    self.setData({
      show_calendar: false,
    });
  },

  /**
   * 关闭日历
   */
  closeCalendar() {
    self.setData({
      show_calendar: true,
    });
  }
})