微信小程序实现日历功能


Posted in Javascript onNovember 27, 2018

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

效果图:

微信小程序实现日历功能

微信小程序实现日历功能

代码:

<view class="calendar">
 <view class="selectDate">
 <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view>
 <view class="date-wrap">
  {{year}}年{{month}}月
 </view>
 <view class="goright iconfont icon-jianzuo" bindtap="nextMonth"></view>
 </view>
 <view class="week">
 <view wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key" style="width:{{param}}px;height:{{param-17}}px;line-height:{{param-17}}px">{{item}}</view>
 </view>
 <view class="date" style='width: {{ param * 7 }}px;'>
 <block wx:for="{{dateArr}}" wx:for-index="index" wx:for-item="item" wx:key="key">
  <view style="{{index ==0?'margin-left:'+ param *firstDay +'px;':''}}width:{{param}}px;height:{{param-10}}px;line-height:{{param-10}}px;" class="{{index+1==day?'today':''}} {{index+1==day&&isClock?'clockOn':''}}"><view class="day">{{item}}</view></view>
 </block>
 </view>
</view><!--end calendar-->
data: {
 year:'',
 month:'',
 day:'',
 weekArr: ['日', '一', '二', '三', '四', '五','六'],
 dateArr:[],
 firstDay:'',
 lastDay:'',
 param:null,
 clockNum:3,
 },
getDate: function () { //获取当月日期
 var mydate = new Date();
 var year = mydate.getFullYear();
 var month = mydate.getMonth();
 var months = month + 1;
 this.data.year = year;
 this.data.month = months;
 this.data.day = mydate.getDate();
 var fist = new Date(year, month, 1);
 this.data.firstDay = fist.getDay();
 var last = new Date(year, months, 0); 
 this.data.lastDay = last.getDate();

 this.setData({
  year: this.data.year,
  month: this.data.month,
  day: this.data.day,
  firstDay: this.data.firstDay,
  lastDay: this.data.lastDay
 })
 console.log("今天:" + this.data.day);
 },
 setDate: function () {
 for (var i = 1; i < this.data.lastDay + 1; i++) {
  this.data.dateArr.push(i);
 }
 this.setData({
  dateArr: this.data.dateArr,
  firstDay: this.data.firstDay
 })
 },
 prevMonth:function(){ //上一月
 var months="";
 var years="";
 if(this.data.month ==1){
  years=this.data.year-1
  this.data.month=12;
  months=this.data.month;
 }else{
  years=this.data.year;
  months = this.data.month - 1;
 }
 
 var first = new Date(years, months-1, 1);
 this.data.firstDay = first.getDay();
 var last = new Date(years, months, 0);
 this.data.lastDay = last.getDate();
 
 this.setData({
  month: months,
  year:years,
  firstDay: this.data.firstDay,
  lastDay: this.data.lastDay
 })

 this.data.dateArr = [];
 for (var i = 1; i < this.data.lastDay + 1; i++) {
  this.data.dateArr.push(i);
 }
 this.setData({
  dateArr: this.data.dateArr
 })
 },
 nextMonth:function(){ //下一月
 var months="";
 var years="";
 if(this.data.month== 12){
  this.data.month=0;
  months = this.data.month;
  years = this.data.year+1;
 }else{
  months = this.data.month+1;
  years = this.data.year;
 }
 var months = this.data.month + 1;
 var first = new Date(years, months-1,1);
 this.data.firstDay= first.getDay();
 var last = new Date(years,months,0);
 this.data.lastDay= last.getDate();
 this.setData({
  month: months,
  year:years,
  firstDay:this.data.firstDay,
  lastDay:this.data.lastDay
 })

 this.data.dateArr = [];
 for (var i = 1; i < this.data.lastDay + 1; i++) {
  this.data.dateArr.push(i);
 }
 this.setData({
  dateArr: this.data.dateArr
 })
 },
onLoad: function (options) {
 this.getDate();
 this.setDate();
 var res = wx.getSystemInfoSync();
 this.setData({
  param:res.windowHeight/12,
 })
 },

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

Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序如何使用云开发
May 17 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
微信小程序实现打卡日历功能
Sep 21 #Javascript
微信小程序实现时间预约功能
Nov 27 #Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 #Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 #Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 #Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
You might like
PHP新手上路(三)
2006/10/09 PHP
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
js实现简单模态框实例
2018/11/16 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python实现批量下载图片的方法
2015/07/08 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
班会关于环保演讲稿
2013/12/29 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
商务邀请函
2015/01/30 职场文书
英文慰问信
2015/02/14 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS