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


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 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
js获取图片的base64编码并压缩
Dec 05 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
中英文字符串翻转函数
2008/12/09 PHP
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python 互换字典的键值对实例
2019/02/12 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Django url 路由匹配过程详解
2021/01/22 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
华三通信H3C面试题
2015/05/15 面试题
学生的自我鉴定范文
2013/10/24 职场文书
大二学习计划书范文
2014/04/27 职场文书
求职信的正确写法
2014/07/10 职场文书
检察院起诉书
2015/05/20 职场文书
汶川大地震感悟
2015/08/10 职场文书
《去年的树》教学反思
2016/02/18 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python