微信小程序日历/日期选择插件使用方法详解


Posted in Javascript onDecember 28, 2018

微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下

微信小程序日历/日期选择插件使用方法详解

wxml

<view class="canlendarBgView">
 <view class="canlendarView">
  <view class="canlendarTopView">
   <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
    <view class="leftView">《</view>
   </view>
   <view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
   <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
    <view class="rightView">》</view>
   </view>
  </view>
  <view class="weekBgView">
   <view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
  </view>
  <view class="dateBgView">
   <view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
   </view>
   <view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
    <view class="datesView {{index == todayIndex ? 'dateSelectView' : ''}}">{{item}}</view>
   </view>
  </view>
 </view>
 <view>点击日期选择</view>
</view>

js

//index.js
//获取应用实例
Page({
 data: {
  hasEmptyGrid: false,
  cur_year: '',
  cur_month: '',
 },
 onLoad(options) {
  this.setNowDate();
 },
 
 dateSelectAction: function (e) {
  var cur_day = e.currentTarget.dataset.idx;
  this.setData({
   todayIndex: cur_day
  })
  console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
 },
 
 setNowDate: function () {
  const date = new Date();
  const cur_year = date.getFullYear();
  const cur_month = date.getMonth() + 1;
  const todayIndex = date.getDate() - 1;
  console.log(`日期:${todayIndex}`)
  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  this.calculateEmptyGrids(cur_year, cur_month);
  this.calculateDays(cur_year, cur_month);
  this.setData({
   cur_year: cur_year,
   cur_month: cur_month,
   weeks_ch,
   todayIndex,
  })
 },
 
 getThisMonthDays(year, month) {
  return new Date(year, month, 0).getDate();
 },
 getFirstDayOfWeek(year, month) {
  return new Date(Date.UTC(year, month - 1, 1)).getDay();
 },
 calculateEmptyGrids(year, month) {
  const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
  let empytGrids = [];
  if (firstDayOfWeek > 0) {
   for (let i = 0; i < firstDayOfWeek; i++) {
    empytGrids.push(i);
   }
   this.setData({
    hasEmptyGrid: true,
    empytGrids
   });
  } else {
   this.setData({
    hasEmptyGrid: false,
    empytGrids: []
   });
  }
 },
 calculateDays(year, month) {
  let days = [];
 
  const thisMonthDays = this.getThisMonthDays(year, month);
 
  for (let i = 1; i <= thisMonthDays; i++) {
   days.push(i);
  }
 
  this.setData({
   days
  });
 },
 handleCalendar(e) {
  const handle = e.currentTarget.dataset.handle;
  const cur_year = this.data.cur_year;
  const cur_month = this.data.cur_month;
  if (handle === 'prev') {
   let newMonth = cur_month - 1;
   let newYear = cur_year;
   if (newMonth < 1) {
    newYear = cur_year - 1;
    newMonth = 12;
   }
 
   this.calculateDays(newYear, newMonth);
   this.calculateEmptyGrids(newYear, newMonth);
 
   this.setData({
    cur_year: newYear,
    cur_month: newMonth
   })
 
  } else {
   let newMonth = cur_month + 1;
   let newYear = cur_year;
   if (newMonth > 12) {
    newYear = cur_year + 1;
    newMonth = 1;
   }
 
   this.calculateDays(newYear, newMonth);
   this.calculateEmptyGrids(newYear, newMonth);
 
   this.setData({
    cur_year: newYear,
    cur_month: newMonth
   })
  }
 }
})

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

Javascript 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 #Javascript
Angular6新特性之Angular Material
Dec 28 #Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 #Javascript
小程序实现抽奖动画
Apr 16 #Javascript
You might like
php一个找二层目录的小东东
2012/08/02 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php阳历转农历优化版
2016/08/08 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python网络爬虫实例讲解
2016/04/28 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python装饰器用法实例总结
2018/05/26 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python SVM 线性分类模型的实现
2019/07/19 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python判断变量是否为列表的方法
2020/09/17 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
详细介绍python类及类的用法
2021/05/31 Python