南强小屋 Design By 杰米
本文实例为大家分享了精确到秒的微信小程序日期时间选择器，供大家参考，具体内容如下
效果图
实现原理
利用微信小程序的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 "_blank" href="http://xiazai.jb51.net/201801/yuanma/Weixinprogram(jb51.net).rar">下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无微信小程序日期时间选择器使用方法的评论...