微信小程序实现日期时间选择器的方法

　　介绍

小编给大家分享一下微信小程序实现日期时间选择器的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<>强声明

错误:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变。

造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成。

处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bindchange事件中。

<>强效果图

微信小程序实现日期时间选择器的方法

实现原理

利用微信小程序的选择器组件的多列选择器实现!

WXML

& lt; view 类=皌ui-picker-content"比; 　　,& lt; view 类=皌ui-picker-name"祝辞时间选择器(选择时分)& lt;/view> 　　,& lt; picker 模式=皌ime",价值=https://www.yisu.com/zixun/{{时间}}”开始=?”结束=跋挛纭眀indchange=" changeTime "> 　　<视图类=" tui-picker-detail "> 　　午饭时间:{{时间}} 　　 　　 　　 　　 　　<视图类=" tui-picker-content "> 　　<视图类=" tui-picker-name ">日期选择器(选择年月日) 　　<选择器模式”=叭掌凇奔壑?{{日期}}”开始=?017-10-01”结束=?017-10-08”bindchange=" changeDate "> 　　<视图类=" tui-picker-detail "> 　　国庆出游:{{日期}} 　　 　　 　　 　　 　　<视图类=" tui-picker-content "> 　　<视图类=" tui-picker-name ">日期时间选择器(精确到秒) 　　<选择器模式”=癿ultiSelector”价值={{dateTime}}”bindchange=癱hangeDateTime bindcolumnchange”=癱hangeDateTimeColumn”范围=" {{dateTimeArray}} "> 　　<视图类=" 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]]}} 　　 　　 　　 　　<视图类=" tui-picker-content "> 　　<视图类=" tui-picker-name ">日期时间选择器(精确到分) 　　<选择器模式”=癿ultiSelector”价值={{dateTime1}}”bindchange=癱hangeDateTime1 bindcolumnchange”=癱hangeDateTimeColumn1”范围=" {{dateTimeArray1}} "> 　　<视图类=" tui-picker-detail "> 　　选择日期时间:{{dateTimeArray1 [0] [dateTime1 [0]]}}, {{dateTimeArray1 [1] [dateTime1 [1]]}}, {{dateTimeArray1 [2] [dateTime1 [2]]}} {{dateTimeArray1 [3] [dateTime1 [3]]}}: {{dateTimeArray1 [4] [dateTime1 [4]]}} 　　 　　 　　

JS

var  dateTimePicker =,要求(& # 39;. ./. ./跑龙套dateTimePicker.js& # 39;); 　　 　　页面({ 　　,数据:{ 　　时间,日期:大敌;& # 39;2018 - 10 - 01 & # 39;, 　　,,时间:& # 39;12 # 39; 　　,,dateTimeArray:空, 　　dateTime:, null,才能 　　,,dateTimeArray1:空, 　　,,dateTime1:空, 　　2000年,startYear:大敌; 　　endYear才能:2050 　　}, 　　,onLoad () {//,才能获取完整的年月日,时分秒,以及默认显示的数组 　　var 才能;obj =, dateTimePicker.dateTimePicker (this.data.endYear this.data.startYear也); 　　var 才能;obj1 =, dateTimePicker.dateTimePicker (this.data.endYear this.data.startYear也);//才能,精确到分的处理,将数组的秒去掉 　　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才能({,日期:e.detail.value}); 　　}, 　　,changeTime (e) { 　　this.setData才能({,时间: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; 　　 　　加勒比海盗才能[e.detail.column],=, e.detail.value; 　　dateArr才能[2],=,dateTimePicker.getMonthDay (dateArr [0] [arr [0]], dateArr [1] [arr [1]]); 　　 　　this.setData({才能 　　,,,dateTimeArray: dateArr, 　　,,dateTime:加勒比海盗 　　,,}); 　　}, 　　,changeDateTimeColumn1 (e), { 　　var 才能;arr =, this.data.dateTime1,, dateArr =, this.data.dateTimeArray1; 　　 　　加勒比海盗才能[e.detail.column],=, e.detail.value; 　　dateArr才能[2],=,dateTimePicker.getMonthDay (dateArr [0] [arr [0]], dateArr [1] [arr [1]]); 　　 　　,this.setData({大敌; 　　,,,dateTimeArray1: dateArr, 　　,,dateTime1:加勒比海盗 　　,,}); 　　,} 　　})

微信小程序实现日期时间选择器的方法