小程序日历日期范围选择实现可跨月份

简介:

小程序日历日期范围选择实现可跨月份拿走不谢

看图说话

1575795630_1_

上代码,主要有三个文件 .wxml .wxss .js
ionfont.wxss 是图标 ,iconfont 图标如何转换请点击

calendar.wxml

<!-- centby.com -->
<view class="calendar">
  <view class="section">
    <view class="title flex-box">
      <view bindtap="past"><text class="iconfont icon-zuo"></text></view>
      <view class="title">{
   {
   currentShow}}</view>
      <view bindtap="future"><text class="iconfont icon-you"></text></view>
    </view>
    <view class="week flex-box">
      <view wx:for="{
   {week}}" wx:key="{
   {item}}" class="weekday">{
   {
   item}}</view>
    </view>
    <view class="days flex-box">
      <view wx:for="{
   {days}}" wx:key="{
   {item}}" class="day" data-today="{
   {item.today}}" bindtap="select">
        <view class="circle {
   {item.today == today ? '' : (item.sign ? 'sign' : '')}}">
          <view>
            {
   {
   item.today == today ? '' : item.day}}
            <text class="iconfont icon-star color-g {
   {item.today == today ? '' : 'hide'}}"></text>
          </view>
          <view>
            {
   {
   item.start ? '起' : ''}}
            {
   {
   item.end ? '止' : ''}}
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="cut"></view>
  <view class="footer">
    <view class="footer-title">清除已选</view>
    <view class="footer-content"></view>
    <view class="footer-side flex-box">
      <view>
        <view class="footer-lf"><text class="color-e">开始时间:</text>{
   {
   timeShowS}}</view>
        <view class="footer-lf"><text class="color-e">截止时间:</text>{
   {
   timeShowE}}</view>
      </view>
      <view>
        <button class="footer-btn" bindtap="next">确定</button>
      </view>
    </view>
  </view>
</view>

calendar.js

// centby.com
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    week: ['日', '一', '二', '三', '四', '五', '六'],
    days: [],
    today: '2019-11-30',//当天,展示星星标记
    currentShow: '2019-11-30',//展示日期
    currentDate: '2019-11-30',//点击选中日期
    viewImg: '/images/f.png',
    istrue: false,//图片浏览器
    clockIn: [{
   
      id: '0',
      timeSlot: '08:00-12:00',
      time: '07:59:59',
      type: '1',
      place: '学校大门',
      imgPath: '/images/e.png'
    }, {
   
      id: '1',
      timeSlot: '08:00-12:00',
      time: '07:59:59',
      type: '2',
      place: '学校大门',
      imgPath: '/images/f.png'
    }],
    changeTap: false,
    startRange: '',
    timeRange: [],
    timeStart: '',
    timeEnd: '',
  },

  //获取今天
  getDay() {
   
    var today = new Date();
    var y = today.getFullYear();
    var m = today.getMonth();
    var d = today.getDate();
    //当月月份
    var todayMonth = today.getMonth() + 1;
    if (todayMonth < 10) {
   
      todayMonth = "0" + todayMonth;
    }
    var sendDay = y + "-" + todayMonth + '-' + d;
    return sendDay;
  },

  calendar(e) {
   
    let that = this;
    let today = new Date(e);
    let y = today.getFullYear();
    let m = today.getMonth();
    let d = today.getDate();
    //当月月份
    let todayMonth = today.getMonth() + 1;
    if (todayMonth < 10) {
   
      todayMonth = "0" + todayMonth;
    }
    //当月第一天是星期几
    let week = new Date(y, m, 1).getDay();
    //当月最后一天
    let lastDay = new Date(y, m + 1, 0).getDate();
    //渲染日历
    let days = [];
    for (let i = 0; i < week; i++) {
   
      let obj = {
   
        id: i,
        day: '',
        today: '',
        sign: false
      };
      days.push(obj);
    }
    let timeRange = this.data.timeRange;
    let timeLen = timeRange.length;
    for (let j = 0; j< lastDay; j++) {
   
      let k = j + 1;
      let idx = j + week;
      //渲染每天日期状态
      let theDay = y + "-" + todayMonth + '-' + k;
      let show = false;
      let starts = false;
      let ends = false;
      for (let m = 0;m < timeLen;m++){
   
        if(timeRange[m] == theDay){
   
          show = true;
          //渲染 起 和 止 标记
          if(m == 0){
   
            starts = true;
          }
          if(m == (timeLen - 1)){
   
            ends = true;
          }
        }
      }
      //渲染每天日期
      let cell = {
   
        id: idx,
        day: k,
        today: theDay,
        sign: show,
        start: starts,
        end: ends
      };
      days.push(cell);
    }
    let currentShow = y + "年" + todayMonth + "月";
    this.setData({
   
      days: days,
      currentDate: e,
      currentShow: currentShow
    });
  },

  next() {
   
    console.log('next');
    wx.redirectTo({
   
      url: '/pages/index/student',
    })
  },

  //上个月
  past() {
   
    let today = new Date(this.data.currentDate);
    let y = today.getFullYear();
    //取出月份不加 1 ,就等于上个月实际月份
    let m = today.getMonth();
    let d = 1;
    //如果当前 m 等于 0 当月为一月份,变成上一年的12月
    if (m < 1) {
   
      y = y - 1;
      m = 12;
    }
    if (m < 10) {
   
      m = '0' + m;
    }
    let day = y + '-' + m + '-' + d;
    this.calendar(day);
  },

  //下个月
  future() {
   
    let today = new Date(this.data.currentDate);
    let y = today.getFullYear();
    //取出当前月
    let m = today.getMonth();
    let d = 1;
    //十二月份变成下一年的 1 月
    if (m > 10) {
   
      y = y + 1;
      m = 1;
    } else {
   
      m = m + 2;
    }
    if (m < 10) {
   
      m = '0' + m;
    }
    let day = y + '-' + m + '-' + d;
    this.calendar(day);
  },

  //选择日期范围,1选择日期
  getDates(datestr) {
   
    var temp = datestr.split("-");
    var m = parseInt(temp[1]) - 1;
    var date = new Date(temp[0], m, temp[2]);
    return date;
  },

  //选择日期范围,2生成日期范围内所有的日期列表
  datesList(s,e){
   
    let that = this;
    let arys = [];
    let start = s;
    let end = e;
    let startTime = that.getDates(start);
    let endTime = that.getDates(end);
    while ((endTime.getTime() - startTime.getTime()) >= 0) {
   
      let year = startTime.getFullYear();
      let monthA = startTime.getMonth() + 1;
      let month = monthA.toString().length == 1 ? "0" + monthA.toString() : monthA;
      let d = startTime.getDate();
      let ds = year + "-" + month + "-" + d;
      arys.push(ds)
      startTime.setDate(startTime.getDate() + 1);
    }
    return arys;
  },

  //选择日期范围
  select(e) {
   
    let that = this;
    let day = e.currentTarget.dataset.today;
    let taps = this.data.changeTap;
    let startRange = this.data.startRange;
    //初始化 startRange,进入页面第一次点击触发
    if(startRange == ''){
   
      startRange = day;
    }
    let list = [];
    let paramR = day;
    let paramS = day;
    let paramE = day;
    let timeShowS = '';
    let timeShowE = '';
    if(taps && day){
   
      //截止时间动作,先比较两个时间
      let dateS = new Date(startRange);
      let dateE = new Date(day);
      if (dateS.getTime() == dateE.getTime()){
   
        list = [day];
      }else if (dateS.getTime() > dateE.getTime()) {
   
        list = that.datesList(day, startRange);
        paramE = startRange;
      } else if (dateS.getTime() < dateE.getTime()) {
   
        list = that.datesList(startRange, day);
        paramS = startRange;
      }
      timeShowS = paramS;
      timeShowE = paramE;
    }else if(!taps && day){
   
      //开始时间动作
      list = [day];
    }
    that.setData({
   
      changeTap: !taps,
      startRange: paramR,
      timeRange: list,
      timeStart: paramS,
      timeEnd: paramE,
      timeShowS: timeShowS,
      timeShowE: timeShowE
    });
    that.calendar(day);
    //console.log(list)
  },

  openGallery: function (e) {
   
    let path = e.currentTarget.dataset.url;
    this.setData({
   
      viewImg: path,
      istrue: true
    })
  },

  closeGallery: function () {
   
    this.setData({
   
      istrue: false
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    console.log(options);
    let day = this.getDay();
    this.setData({
   
      today: day,
      currentDate: day
    });
    this.calendar(day);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
   

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
   

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
   

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
   
    console.log(0);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
   

  }
})

calendar.wxss

@import 'common/iconfont.wxss';
/* centby.com */

.calendar {
   
    height: 100%;
    color: #666;
}
.calendar .color-a {
   
  color: #78d278;
}
.calendar .color-b {
   
  color: #ff7977;
}
.calendar .color-c {
   
  color: #3cb2ef;
}
.calendar .color-d {
   
  color: #ffdb5c;
}
.calendar .color-e {
   
  color: #ccc;
}
.calendar .color-g {
   
  color: #3dc19a;
}
.section {
   
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
.title {
   
    padding: 20rpx 0;
    align-items: center;
    justify-content: space-between;
}
.week {
   
    padding: 20rpx 0;
    border-radius: 20rpx 20rpx 0 0;
}
.weekday {
   
    margin-right: 1%;
    width: 13.28%;
    text-align: center;
}
.days {
   
    padding: 10rpx 0;
    flex-wrap: wrap;
}
.day {
   
    position: relative;
    margin: 0;
    padding: 0;
  height: 90rpx;
    width: 14.28%;
    text-align: center;
  border-radius: 10rpx;
  background: #fff;
  cursor: pointer;
}
.circle {
   
  margin: 0 auto;
  padding-top: 20rpx;
  width: 100%;
    height: 90rpx;
  font-size: 24rpx;
}
.sign {
   
  color: #fff;
  background: #3dc19a;
}
.cut {
   
  height: 40rpx;
  background: #f9f9f9;
}
.footer-title {
   
  padding: 30rpx;
  color: red;
  text-align: center;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
.footer-content {
   
  height: 240rpx;
  background: #f2f2f2;
}
.footer-side {
   
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
.footer-lf {
   
  padding: 6rpx 0;
  font-size: 24rpx;
}
.calendar .footer-btn {
   
  padding: 12rpx;
  width: 180rpx;
  min-height: auto;
  font-size: 28rpx;
  color: #fff;
  border-radius: 9999rpx;
  background: #3dc19a;
  cursor: pointer;
}
.detail {
   
  background: #fff;
}
.detail-title {
   
  padding: 20rpx;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.detail-box {
   
  padding: 40rpx 30rpx 0;
}
.detail-list {
   
  position: relative;
  padding-bottom: 40rpx;
}
.detail-list:after {
   
  content:" ";
  position:absolute;
  top: 32rpx;
  bottom: 0;
  left: 16rpx;
  width: 1px;
  border-left: 1px solid #f2f2f2;
}
.detail-list:last-child:after {
   
  border: none;
}
.detail-time {
   
  padding-bottom: 20rpx;
  color: #ccc;
  font-size: 24rpx;
}
.detail-cell {
   
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 40rpx;
  line-height: 1.7;
}
.detail-img {
   
  width: 90rpx;
  height: 120rpx;
  cursor: pointer;
}

iconfont.wxss

@font-face {
   
    font-family: 'iconfont';
    src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
    font-weight: normal;
    font-style: normal;
}

.iconfont {
   
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-biaoa:before {
   
  content: "\e810";
}

.icon-biao:before {
   
  content: "\e811";
}

.icon-bumen:before {
   
  content: "\e662";
}

.icon-ren:before {
   
  content: "\e6b1";
}

.icon-star:before {
   
  content: "\e630";
}

.icon-daiyue:before {
   
  content: "\e63f";
}

.icon-yuan:before {
   
  content: "\e657";
}

.icon-dingwei:before {
   
  content: "\e61e";
}

.icon-liebiao:before {
   
  content: "\e602";
}

.icon-rili:before {
   
  content: "\e72a";
}

.icon-shang:before {
   
  content: "\e6ad";
}

.icon-you:before {
   
  content: "\e812";
}

.icon-zuo:before {
   
  content: "\e813";
}

.icon-xia:before {
   
  content: "\e814";
}

看完的同学是不是很好用,只需要CV大法就可实现,哈哈

目录
相关文章
|
小程序
微信小程序根据日期和时间进行排序
最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助
537 0
|
7月前
|
JSON 小程序 安全
【经验分享】如何实现小程序日历范围选择功能
【经验分享】如何实现小程序日历范围选择功能
420 9
|
小程序
微信小程序 | 吐血整理的日历及日程时间管理
微信小程序 | 吐血整理的日历及日程时间管理
2869 0
微信小程序 | 吐血整理的日历及日程时间管理
|
JSON 小程序 JavaScript
微信小程序-vant-weapp日历组件的使用(年月日)
微信小程序-vant-weapp日历组件的使用(年月日)
297 0
|
JSON 小程序 JavaScript
小程序vant-weapp的日历组件的使用
小程序vant-weapp的日历组件的使用
140 0
|
小程序
微信小程序--日历模块页面
微信小程序--日历模块页面
267 0
|
Web App开发 缓存 小程序
教你如何写一个符合自己需求的小程序日历组件
教你如何写一个符合自己需求的小程序日历组件
|
小程序 定位技术 C#
C#编程学习(01):北斗时转日历时的小程序
C#编程学习(01):北斗时转日历时的小程序
C#编程学习(01):北斗时转日历时的小程序
|
小程序 计算机视觉 JavaScript
小程序日历日期单选选择实现
###小程序日历日期单选选择实现拿走不谢 看图说话 ![1575796331_1_](https://yqfile.alicdn.com/51bf41a1c0d8c45753874db1776d692395757936.
1668 0
小程序日历日期单选选择实现
|
算法 C语言
【C语言】第一个C语言小程序 —— 日期算法和万年历
1. 写了个万年历的功能练练手。还没有写交互的代码,只是把方法写完了。先给出头部和方法签名 #include #define DAYS_PER_WEEK 7 #define MONTHS 12 #define DATE_HEADER " Sun Mon Tues Wed...
1884 0