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


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 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
js实现简单数字变动效果
Nov 06 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
JS实现马赛克图片效果完整示例
Apr 13 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
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
中学老师的自我评价
2013/11/07 职场文书
中国合伙人观后感
2015/06/02 职场文书
活动简报范文
2015/07/22 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android