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


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自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 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 5.0 Pear安装方法
2006/12/06 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python实现目录树生成示例
2014/03/28 Python
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python聊天室实例程序分享
2016/01/05 Python
解读python logging模块的使用方法
2018/04/17 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python常用断言函数实例汇总
2020/11/30 Python
大学生求职自我评价
2014/01/16 职场文书
小学五年级学生评语
2014/04/22 职场文书
鉴定评语大全
2014/05/05 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
员工安全承诺书
2014/05/22 职场文书
艾滋病宣传标语
2014/06/25 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server