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


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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 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面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php 操作调试的方法
2012/07/12 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
js 居中漂浮广告
2010/03/21 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python实现Const详解
2015/01/27 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Django CBV类的用法详解
2019/07/26 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
农民工工资支付承诺函
2014/03/31 职场文书
无违反计划生育证明格式
2015/06/24 职场文书