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


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 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
js实现抽奖效果
Mar 27 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 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扩展编写点滴 技巧收集
2010/03/09 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
基于jquery实现五星好评
2017/11/18 jQuery
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python colormap库的安装和使用详情
2020/10/06 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
NET程序员上机面试题
2015/05/23 面试题
中式结婚主持词
2014/03/14 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
工会文体活动总结
2015/05/07 职场文书
西柏坡观后感
2015/06/08 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB