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


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 $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
Javascript缓存API
Jun 14 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
详细分析单线程JS执行问题
Nov 22 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
一个域名查询的程序
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python 批量修改/替换数据的实例
2018/07/25 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
Java语言的优势
2015/01/10 面试题
学校校庆演讲稿
2014/05/22 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
学风建设主题班会
2015/08/17 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python