小程序实现带年月选取效果的日历


Posted in Javascript onJune 27, 2018

本文实例为大家分享了小程序日历展示的具体代码,供大家参考,具体内容如下

根据前面的日历,又遇到到个好玩的日历需求,分享给大家

 小程序实现带年月选取效果的日历

这是个带年月左右选取的日历展示!并且当天的对应日会被高亮显示!下面看下实现代码!

1.wxml代码结构

<view class='wrap'> 
  <view> 
    <view class='date-show'> 
      <view class='lt-arrow' bindtap='lastMonth'> 
        <image src='../images/nextMonth.png' mode='aspectFit'></image> 
      </view> 
      {{year}}年{{month}}月 
      <view class='rt-arrow' bindtap='nextMonth'> 
        <image src='../images/nextMonth.png' mode='aspectFit'></image> 
      </view> 
    </view> 
  </view> 
  <view class='header'> 
    <view wx:for='{{date}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view> 
  </view> 
  <view class='date-box'> 
    <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}'>      
      <view class='date-head'> 
        <view>{{item.dateNum}}</view> 
      </view> 
      <view class='date-weight'>{{item.weight}}</view> 
    </view> 
  </view> 
</view>

2.wxss代码结构

.date-show{ 
  position: relative; 
  width: 250rpx; 
  font-family: PingFang-SC-Regular; 
  font-size: 40rpx; 
  color: #282828; 
  text-align: center; 
  margin: 59rpx auto 10rpx; 
} 
.lt-arrow,.rt-arrow{ 
  position: absolute; 
  top: 1rpx; 
  width: 60rpx; 
  height: 60rpx; 
} 
.lt-arrow image,.rt-arrow image{ 
  width: 14rpx; 
  height: 26rpx; 
} 
.lt-arrow{ 
  left: -110rpx; 
  transform: rotate(180deg); 
} 
.rt-arrow{ 
  right: -100rpx; 
} 
.header{ 
  font-size: 0; 
  padding: 0 24rpx; 
} 
.header>view{ 
  display: inline-block; 
  width: 14.285%; 
  color: #333; 
  font-size: 30rpx; 
  text-align: center; 
  border-bottom: 1px solid #D0D0D0; 
  padding: 39rpx 0; 
} 
.weekMark{ 
  position: relative; 
} 
.weekMark view{ 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  border-bottom: 1px solid #22A7F6; 
} 
.date-box{ 
  font-size: 0; 
  padding: 10rpx 0; 
} 
.date-box>view{ 
  position: relative; 
  display: inline-block; 
  width: 14.285%; 
  color: #020202; 
  font-size: 40rpx; 
  text-align: center; 
  vertical-align: middle; 
  margin: 15rpx 0; 
} 
.date-head{ 
  height: 60rpx; 
  line-height: 60rpx; 
  font-size: 26rpx; 
} 
.nowDay .date-head{ 
  width: 60rpx; 
  border-radius: 50%; 
  text-align: center; 
  color: #fff; 
  background-color: #22A7F6; 
  margin: 0 auto; 
} 
.date-weight{ 
  font-size: 22rpx; 
  padding: 15rpx 0; 
} 
.nowDay .date-weight{ 
  color: #22A7F6; 
} 
.one{ 
  position: absolute; 
  bottom: 0; 
  right: 5rpx; 
  width: 20rpx; 
  height: 20rpx; 
  border-radius: 50%; 
  background-color: red; 
} 
.two{ 
  position: absolute; 
  bottom: 30rpx; 
  right: 5rpx; 
  width: 20rpx; 
  height: 20rpx; 
  border-radius: 50%; 
  background-color: blue; 
}

index.js 

//index.js 
//获取应用实例 
const app = getApp() 
 
Page({ 
 data: { 
    year: 0, 
    month: 0, 
    date: ['日', '一', '二', '三', '四', '五', '六'], 
    dateArr: [], 
    isToday: 0, 
    isTodayWeek: false, 
    todayIndex: 0 
  }, 
 onLoad: function () { 
    let now = new Date(); 
    let year = now.getFullYear(); 
    let month = now.getMonth() + 1; 
    this.dateInit(); 
    this.setData({ 
      year: year, 
      month: month, 
      isToday: '' + year + month + now.getDate() 
    }) 
 }, 
 dateInit: function(setYear,setMonth){ 
    //全部时间的月份都是按0~11基准,显示月份才+1 
    let dateArr = [];            //需要遍历的日历数组数据 
    let arrLen = 0;             //dateArr的数组长度 
    let now = setYear ? new Date(setYear,setMonth) : new Date(); 
    let year = setYear || now.getFullYear(); 
    let nextYear = 0; 
    let month = setMonth || now.getMonth();         //没有+1方便后面计算当月总天数 
    let nextMonth = (month + 1) > 11 ? 1 : (month + 1);    
    let startWeek = new Date( year+','+(month + 1)+','+1).getDay();             //目标月1号对应的星期 
    let dayNums = new Date(year,nextMonth,0).getDate();       //获取目标月有多少天 
    let obj = {};     
    let num = 0; 
     
    if(month + 1 > 11){ 
      nextYear = year + 1; 
      dayNums = new Date(nextYear,nextMonth,0).getDate(); 
    } 
    arrLen = startWeek + dayNums; 
    for(let i = 0; i < arrLen; i++){ 
      if(i >= startWeek){ 
        num = i - startWeek + 1; 
        obj = { 
          isToday: '' + year + (month + 1) + num, 
          dateNum: num, 
          weight: 5 
        } 
      }else{ 
        obj = {}; 
      } 
      dateArr[i] = obj; 
    } 
    this.setData({ 
      dateArr: dateArr 
    }) 
 
    let nowDate = new Date(); 
    let nowYear = nowDate.getFullYear(); 
    let nowMonth = nowDate.getMonth() + 1; 
    let nowWeek = nowDate.getDay(); 
    let getYear = setYear || nowYear; 
    let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth; 
 
    if (nowYear == getYear && nowMonth == getMonth){ 
      this.setData({ 
        isTodayWeek: true, 
        todayIndex: nowWeek 
      }) 
    }else{ 
      this.setData({ 
        isTodayWeek: false, 
        todayIndex: -1 
      }) 
    } 
  }, 
  lastMonth: function(){ 
    //全部时间的月份都是按0~11基准,显示月份才+1 
    let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year; 
    let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2; 
    this.setData({ 
      year: year, 
      month: (month + 1) 
    }) 
    this.dateInit(year,month); 
  }, 
  nextMonth: function(){ 
    //全部时间的月份都是按0~11基准,显示月份才+1 
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year; 
    let month = this.data.month > 11 ? 0 : this.data.month; 
    this.setData({ 
      year: year, 
      month: (month + 1) 
    }) 
    this.dateInit(year, month); 
  } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 #Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 #Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 #Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 #Javascript
浅谈Webpack下多环境配置的思路
Jun 27 #Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 #Javascript
详解关于vue-area-linkage走过的坑
Jun 27 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
JS回调函数深入理解
2019/10/16 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
浅谈Python中的闭包
2015/07/08 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
分析经典Python开发工程师面试题
2019/04/08 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python configparser模块常用方法解析
2020/05/22 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
迎八一活动主题
2014/01/31 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
民间个人借款协议书
2014/09/30 职场文书
个人存款证明书
2014/10/18 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
户外拓展训练感想
2015/08/07 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL