微信小程序实现日历功能


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 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
JS 实现分页打印功能
May 16 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
微信小程序实现打卡日历功能
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
linux iconv方法的使用
2011/10/01 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python实现目录树生成示例
2014/03/28 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python中sys.argv函数精简概括
2018/07/08 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
运输服务质量承诺书
2014/03/27 职场文书
关于安全的演讲稿
2014/05/09 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
2014公司年终工作总结
2014/12/19 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
QT与javascript交互数据的实现
2021/05/26 Javascript
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python