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


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父窗口控制只弹出一个子窗口
Apr 10 Javascript
JavaScript网页制作特殊效果用随机数
May 22 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
Jquery Fade用法详解
Nov 06 jQuery
浅谈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 表单数据的获取代码
2009/03/10 PHP
请离开include_once和require_once
2013/07/18 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python ip正则式
2009/05/07 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Python 里最强的地图绘制神器
2021/03/01 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
新学期班主任寄语
2014/01/18 职场文书
《称象》教学反思
2014/04/25 职场文书
优化Mysql查询的示例
2022/04/26 MySQL