微信小程序日期时间选择器使用方法


Posted in Javascript onFebruary 01, 2018

本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下

效果图

微信小程序日期时间选择器使用方法

实现原理

利用微信小程序的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>

WXSS

@import "../picker/picker.wxss";

使用的是三级联动选择器的样式,所以直接 import 引入!

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
}

总结

  • 将初始化列表以及初始化默认显示的数组放到dateTimePicker.js,防止页面逻辑太乱,而且可以多处使用;
  • 判断是否为闰年,在三木表达式中,必须将能别400整除放在前边,因为或运算只要一个条件满足,就会返回true,不会执行后续表达式;
  • switch case的合并方法需要注意格式;
  • 如果只需要联动列表更新,二结果展示栏不更新,则在changeDateTimeColumn函数中只更新dateTimeArray的值。

DEMO下载

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

Javascript 相关文章推荐
javascript学习笔记之10个原生技巧
May 21 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
JSONP原理及简单实现
Jun 08 Javascript
ionic实现底部分享功能
May 11 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
NW.js 简介与使用方法
Feb 01 #Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 #Javascript
Vue组件之自定义事件的功能图解
Feb 01 #Javascript
微信小程序三级联动选择器使用方法
May 19 #Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
使用JS模拟锚点跳转的实例
Feb 01 #Javascript
微信小程序实现图片预览功能
Jan 31 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Pygame框架实现飞机大战
2020/08/07 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Python join()函数原理及使用方法
2020/11/14 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
中班幼儿评语大全
2014/04/30 职场文书
大学三年计划书范文
2014/04/30 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
四年级语文教学反思
2016/03/03 职场文书