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


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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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多进程编程实例详解
2017/07/19 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
js同源策略详解
2015/05/21 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
浅析python中while循环和for循环
2019/11/19 Python
使用python实现画AR模型时序图
2019/11/20 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
如何利用python发送邮件
2020/09/26 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
会计自我鉴定范文
2013/10/06 职场文书
职称自我鉴定
2013/10/15 职场文书
自我评价正确写法范文
2013/12/10 职场文书
学生实习介绍信
2014/01/15 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
党员活动日总结
2014/05/05 职场文书
企业务虚会发言材料
2014/10/20 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP