微信小程序实现日历小功能


Posted in Javascript onNovember 18, 2020

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

微信小程序实现日历小功能

代码

<!-- 日历 -->
 <view class="gradient">
  <view class="box">
  <view class="spaceAroundCenter flex_align_justify_b">
   <view class="flex-item">
   <view class="item-content flex_align_justify_c" bindtap="doDay" data-key='left'>
    <view class="glyphicon glyphicon-triangle-left">
    <van-icon name="arrow-left" class="flex_align" />
    </view>
   </view>
   </view>
   <view class="flex-item item-content-current-day">
   <view class="item-content flex_align_justify_c">{{currentDate}}</view>
   </view>
   <view class="flex-item">
   <view class="item-content flex_align_justify_c" bindtap="doDay" data-key="right">
    <view class="glyphicon glyphicon-triangle-right">
    <van-icon name="arrow" class="flex_align" />
    </view>
   </view>
   </view>
  </view>

  <view class="spaceAroundCenter">
   <view class="spaceAroundCenter_date">一</view>
   <view class="spaceAroundCenter_date">二</view>
   <view class="spaceAroundCenter_date">三</view>
   <view class="spaceAroundCenter_date">四</view>
   <view class="spaceAroundCenter_date">五</view>
   <view class="spaceAroundCenter_date">六</view>
   <view class="spaceAroundCenter_date">日</view>
  </view>

  <view class="spaceAroundCenter">
   <view class="flex-item day_item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
   <view id='{{vo}}' class="item-content flex_align_justify_c bk-color-day" wx:if="{{vo == currentDay}}" bindtap='onClickItem'>{{vo}}</view>
   <view id='{{vo}}' class="item-content flex_align_justify_c bk-color-dayClick" wx:elif="{{vo == currentClickKey && currentClickKey != '' && vo != ''}}" bindtap='onClickItem'>{{vo}}</view>
   <view id='{{vo}}' class="item-content flex_align_justify_c" bindtap='onClickItem' wx:else>{{vo}}</view>
   <view class="day_item_circle" wx:if="{{currentClickKey!=''&¤tClickKey==vo&&remindlist.length>=1}}"></view>
   </view>
  </view>
  </view>
</view>

CSS:

/* 日历 */
.gradient{
 background: #fff;
 margin-bottom: 16rpx;
 overflow: hidden;
 border-bottom: 1rpx solid #f1f1f1;
}
.gradient .box{
 padding: 0 24rpx;
}
.glyphicon .iconfont{
 font-size: 46rpx;
}
.spaceAroundCenter {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: space-around;
}
.spaceAroundCenter_date{
 font-size: 28rpx;
}
.flex-item {
 /* flex-flow: nowrap;
 flex-grow: 1;
 flex-shrink: 1; */
 width: 14.2%;
 /* padding: 10rpx 0; */
 height: 85rpx;
 display: flex;
 align-items: center;
 justify-content: center;
}
 
.item-content {
 font-size: 28rpx;
 width:80%;
 height: 60%;
}
 /* 当前日期 */
.bk-color-day {
 color: #fff;
 border-radius: 50%;
 background-color: #dd5923;
}

/* 当前选中日期 */
.bk-color-dayClick {
 color: #fff;
 border-radius: 50%;
 background-color: #30318b;
}
 
.item-content-current-day {
 flex-grow: 2;
}
.day_item{
 position: relative;
}
.day_item_circle{
 width: 10rpx;
 height: 10rpx;
 background: #dd5923;
 position: absolute;
 bottom: 0;
 border-radius: 50%;
}

js:

Page({
 data: {
 currentDayList: '',
 currentObj:'',
 arr: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
 currentDate:'',
 currentDay:'',
 year:'',
 month:'',
 currentClickKey:'',
 remindlist:[1,2,3]
 },
 onLoad: function (options) {
 var currentObj = this.getCurrentDayString()
 this.setData({
  currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
  currentDay: currentObj.getDate(),
  currentObj: currentObj,
  year: currentObj.getFullYear(),
  month: currentObj.getMonth() + 1
 })
 this.setSchedule(currentObj);
 },
 doDay: function (e) {
 this.setData({
  currentClickKey:''
 })
 var arr = this.data.arr;
 for (let i in arr) {
  var newarr = 'arr[' + i + ']';
  this.setData({
  [newarr]: ''
  })
 }
 var that = this
 var currentObj = that.data.currentObj
 var Y = currentObj.getFullYear();
 var m = currentObj.getMonth() + 1;
 var d = currentObj.getDate();
 var str = ''
 if (e.currentTarget.dataset.key == 'left') {
  m -= 1
  if (m <= 0) {
  str = (Y - 1) + '/' + 12 + '/' + d
  } else {
  str = Y + '/' + m + '/' + d
  }
 } else {
  m += 1
  if (m <= 12) {
  str = Y + '/' + m + '/' + d
  } else {
  str = (Y + 1) + '/' + 1 + '/' + d
  }
 }
 currentObj = new Date(str)
 this.setData({
  currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
  currentObj: currentObj,
  year: currentObj.getFullYear(),
  month: (currentObj.getMonth() + 1),
  day: ''
 })
 this.setSchedule(currentObj);
 },
 getCurrentDayString: function () {
 var objDate = this.data.currentObj
 if (objDate != '') {
  return objDate
 } else {
  var c_obj = new Date()
  var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
  return new Date(a)
 }
 },
 setSchedule: function (currentObj) {
 var that = this
 var m = currentObj.getMonth() + 1
 var Y = currentObj.getFullYear()
 var d = currentObj.getDate();
 var dayString = Y + '/' + m + '/' + currentObj.getDate()
 var currentDayNum = new Date(Y, m, 0).getDate()
 var currentDayWeek = currentObj.getUTCDay() + 1
 var result = currentDayWeek - (d % 7 - 1);
 var firstKey = result <= 0 ? 7 + result : result;
 var currentDayList = []
 var f = 0
 for (var i = 0; i < 42; i++) {
  let data = []
  if (i < firstKey - 1) {
  currentDayList[i] = ''
  } else {
  if (f < currentDayNum) {
   currentDayList[i] = f + 1
   f = currentDayList[i]
  } else if (f >= currentDayNum) {
   currentDayList[i] = ''
  }
  }
 }
 that.setData({
  currentDayList: currentDayList
 })
 },
 // 设置点击事件
 onClickItem: function (e) {
 // console.log(JSON.stringify(e));
 // console.log(JSON.stringify(e.currentTarget));
 this.setData({
  currentClickKey: e.currentTarget.id
 });
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
微信小程序实现底部弹出模态框
Nov 18 #Javascript
微信小程序实现左滑删除效果
Nov 18 #Javascript
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
You might like
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python实现备份文件实例
2014/09/16 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
如何更优雅地写python代码
2019/07/02 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
逻辑链路控制协议
2016/10/01 面试题
病危通知单
2015/04/17 职场文书
《三国志》赏析
2019/08/27 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python并发编程实例教程之线程的玩法
2021/06/20 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js