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


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 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
js数组去重的方法汇总
Jul 29 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
基于JS判断对象是否是数组
Jan 10 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP递归的三种常用方式
2019/02/28 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
经管应届生求职信
2013/11/17 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
矛盾论读书笔记
2015/06/29 职场文书