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


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 兼容firefox的一些问题
May 21 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
微信小程序如何实现点击图片放大功能
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导入Excel到MySQL的方法
2011/04/23 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
php显示页码分页类的封装
2017/06/08 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
使用Apache的rewrite
2021/03/09 Servers
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
antd Upload 文件上传的示例代码
2018/12/14 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python人民币小写转大写辅助工具
2018/06/20 Python
python实现Flappy Bird源码
2018/12/24 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
新闻网站实习自我鉴定
2013/09/25 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
bat批处理之字符串操作的实现
2022/03/16 Python
MySQL 数据表操作
2022/05/04 MySQL