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


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 29 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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 curl 抓取AJAX异步内容示例
2014/09/09 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js动态切换图片的方法
2015/01/20 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
党课知识竞赛主持词
2014/04/01 职场文书
销售团队口号大全
2014/06/06 职场文书
老龙头导游词
2015/02/11 职场文书
企业文化学习心得体会
2016/01/21 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
浅析NIO系列之TCP
2021/06/15 Java/Android