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


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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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与XML的PDF文档生成技术
2006/10/09 PHP
php 获取全局变量的代码
2011/04/21 PHP
php生成zip文件类实例
2015/04/07 PHP
php实现图片缩略图的方法
2016/03/29 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
js 操作符实例代码
2009/10/24 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JS轮播图的实现方法
2020/08/24 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python3 元组tuple入门基础
2020/02/09 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
全国道德模范事迹
2014/02/01 职场文书
文艺演出策划方案
2014/06/07 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
学雷锋日活动总结
2015/02/06 职场文书
小学音乐课教学反思
2016/02/18 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis