微信小程序如何实现精确的日期时间选择器


Posted in Javascript onJanuary 21, 2020

这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

声明

bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变。

造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成。

处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bindchange事件中。

效果图

微信小程序如何实现精确的日期时间选择器

实现原理

利用微信小程序的picker组件的多列选择器实现!

WXML

<view class="tui-picker-content">
 <view class="tui-picker-name">时间选择器(选择时分)</view>
 <picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
  <view class="tui-picker-detail">
   午饭时间: {{time}} 
  </view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">日期选择器(选择年月日)</view>
 <picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
  <view class="tui-picker-detail">
   国庆出游: {{date}}
  </view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">日期时间选择器(精确到秒)</view>
 <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
  <view class="tui-picker-detail">
   选择日期时间: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
  </view>
 </picker>
</view>
<view class="tui-picker-content">
 <view class="tui-picker-name">日期时间选择器(精确到分)</view>
 <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
  <view class="tui-picker-detail">
   选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
  </view>
 </picker>
</view>

JS

var dateTimePicker = require('../../utils/dateTimePicker.js');

Page({
 data: {
  date: '2018-10-01',
  time: '12:00',
  dateTimeArray: null,
  dateTime: null,
  dateTimeArray1: null,
  dateTime1: null,
  startYear: 2000,
  endYear: 2050
 },
 onLoad(){
  // 获取完整的年月日 时分秒,以及默认显示的数组
  var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  // 精确到分的处理,将数组的秒去掉
  var lastArray = obj1.dateTimeArray.pop();
  var lastTime = obj1.dateTime.pop();
  
  this.setData({
   dateTime: obj.dateTime,
   dateTimeArray: obj.dateTimeArray,
   dateTimeArray1: obj1.dateTimeArray,
   dateTime1: obj1.dateTime
  });
 },
 changeDate(e){
  this.setData({ date:e.detail.value});
 },
 changeTime(e){
  this.setData({ time: e.detail.value });
 },
 changeDateTime(e){
  this.setData({ dateTime: e.detail.value });
 },
 changeDateTime1(e) {
  this.setData({ dateTime1: e.detail.value });
 },
 changeDateTimeColumn(e){
  var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;

  arr[e.detail.column] = e.detail.value;
  dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);

  this.setData({
   dateTimeArray: dateArr,
   dateTime: arr
  });
 },
 changeDateTimeColumn1(e) {
  var arr = this.data.dateTime1, dateArr = this.data.dateTimeArray1;

  arr[e.detail.column] = e.detail.value;
  dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);

  this.setData({ 
   dateTimeArray1: dateArr,
   dateTime1: arr
  });
 }
})

外部JS,dateTimePicker.js的引入

function withData(param){
 return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start,end){
 var start = start || 0;
 var end = end || 1;
 var array = [];
 for (var i = start; i <= end; i++) {
  array.push(withData(i));
 }
 return array;
}
function getMonthDay(year,month){
 var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;

 switch (month) {
  case '01':
  case '03':
  case '05':
  case '07':
  case '08':
  case '10':
  case '12':
   array = getLoopArray(1, 31)
   break;
  case '04':
  case '06':
  case '09':
  case '11':
   array = getLoopArray(1, 30)
   break;
  case '02':
   array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
   break;
  default:
   array = '月份格式不正确,请重新输入!'
 }
 return array;
}
function getNewDateArry(){
 // 当前时间的处理
 var newDate = new Date();
 var year = withData(newDate.getFullYear()),
   mont = withData(newDate.getMonth() + 1),
   date = withData(newDate.getDate()),
   hour = withData(newDate.getHours()),
   minu = withData(newDate.getMinutes()),
   seco = withData(newDate.getSeconds());

 return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear,endYear,date) {
 // 返回默认显示的数组和联动数组的声明
 var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
 var start = startYear || 1978;
 var end = endYear || 2100;
 // 默认开始显示数据
 var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
 // 处理联动列表数据
 /*年月日 时分秒*/ 
 dateTimeArray[0] = getLoopArray(start,end);
 dateTimeArray[1] = getLoopArray(1, 12);
 dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
 dateTimeArray[3] = getLoopArray(0, 23);
 dateTimeArray[4] = getLoopArray(0, 59);
 dateTimeArray[5] = getLoopArray(0, 59);

 dateTimeArray.forEach((current,index) => {
  dateTime.push(current.indexOf(defaultDate[index]));
 });

 return {
  dateTimeArray: dateTimeArray,
  dateTime: dateTime
 }
}
module.exports = {
 dateTimePicker: dateTimePicker,
 getMonthDay: getMonthDay
}

总结

 1、将初始化列表以及初始化默认显示的数组放到dateTimePicker.js,防止页面逻辑太乱,而且可以多处使用;

 2、判断是否为闰年,在三木表达式中,必须将能别400整除放在前边,因为或运算只要一个条件满足,就会返回true,不会执行后续表达式;

 3、switch case的合并方法需要注意格式;

 4、如果只需要联动列表更新,二结果展示栏不更新,则在changeDateTimeColumn函数中只更新dateTimeArray的值。

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

Javascript 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 #Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 #Javascript
微信小程序全选多选效果实现代码解析
Jan 21 #Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 #Javascript
浅谈Vue.use到底是什么鬼
Jan 21 #Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 #Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php多重接口的实现方法
2015/06/20 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js闭包用法实例详解
2016/12/13 Javascript
js实现微博发布小功能
2017/01/12 Javascript
javascript实现简易计算器
2017/02/01 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
Python 中 Meta Classes详解
2016/02/13 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Django 反向生成url实例详解
2019/07/30 Python
Python如何实现FTP功能
2020/05/28 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
校园招聘策划书
2014/01/09 职场文书
导游个人求职信范文
2014/03/23 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2015年个人思想总结
2015/03/09 职场文书