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


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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
复制js对象方法(详解)
Jul 08 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js编写的treeview使用方法
Nov 11 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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系统流量分析的程序
2006/10/09 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
解决python 文本过滤和清理问题
2019/08/28 Python
安装PyInstaller失败问题解决
2019/12/14 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
Java中实现多态的机制
2015/08/09 面试题
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
运动会广播稿80字
2014/01/23 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
商务宴会祝酒词
2015/08/11 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书