微信小程序-日期时间选择器

我在官方表单组件的基础上改出了几种比较常用的日期（时间）选择器，为了更清晰，我没给任何样式，wxss可根据个人喜好添加。

一、picker-view （嵌入页面的滚动选择器）

注意：其中只可放置组件，其他节点不会显示

picker-view-column

仅可放置于中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

二、picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

我这里用到的是多列选择器，时间选择器和日期选择器。

组件详情请进官网查看

https://developers./miniprogram/dev/component/picker.html

三．基于picker-view 进行完善的日期时间选择器。

（1）在pages上单击右键，选择新建目录，输入你想起的名称。建好目录后在新目录上单击右键，新建wxml/js/wxss/json四个文件，文件名与目录名最好一致，便于查找。

（2）在app.json 中的pages里直接新建目录"pages/目录名/里面四个文件名"。推荐使用，比较方便快捷。

注意：这里所有的目录名和文件名只能用英文和数字命名，不能用汉字。

2.日期选择器：

（1）示例代码：“pages/data1/data1”

data1.WXML

<view><view>{{year}}年{{month}}月{{day}}日</view><picker-viewindicator-style="height: 50px;"style="width: 100%; height: 300px;"value="{{value}}"bindchange="bindChange"><picker-view-column><view wx:for="{{years}}" wx:key='{{index}}' style="line-height: 50px">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" wx:key='{{index}}' style="line-height: 50px">{{item}}月</view></picker-view-column><picker-view-column><view wx:for="{{days}}" wx:key='{{index}}' style="line-height: 50px">{{item}}日</view></picker-view-column></picker-view></view>

data1.JS

/ 定义年、月、日的数组都为空const date = new Date()const years = []const months = []const days = []// 获取年for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)}// 获取月份for (let i = 1; i <= 12; i++) {months.push(i)}// 获取日期for (let i = 1; i <= 31; i++) {days.push(i)}Page({// 初始默认的日期data: {years,year: date.getFullYear(),months,month: 2,days,day: 2,value: [9999, 1, 1],},// 获取改变后的日期bindChange(e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],month: this.data.months[val[1]],day: this.data.days[val[2]]})}})

3.时间选择器

（1）示例代码：“pages/data2/data2”

data2.WXML

<view><view style="text-align:center;color:#45BCE8">{{hour}}:{{minute}}:{{min}}<label style="float:right;margin-right:10px;">确定</label></view><view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;"><view class="time-title">时</view><view class="time-title">分</view><view class="time-title">秒</view></view><picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"><picker-view-column class="picker-text"><view wx:for="{{hours}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{minutes}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{mins}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column></picker-view></view>

data2.WXSS

.time-title{float:left;width:33%;text-align:center;color:#45BCE8}.picker-text{text-align:center;}

data2.JS

// 定义时、分、秒的数组都为空const date = new Date()const hours = []const minutes = []const mins = []// 获取小时for (let i = 0; i <= 23; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}hours.push(k)}// 获取分钟for (let i = 0; i <= 59; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}minutes.push(k)}// 获取秒for (let i = 0; i <= 59; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}mins.push(k)}Page({// 页面初始数据data: {hours: hours,hour: "00",minutes: minutes,minute: "00",mins: mins,min: "00",},// 获取新的时间bindChange: function (e) {const val = e.detail.valuethis.setData({hour: this.data.hours[val[0]],minute: this.data.minutes[val[1]],min: this.data.mins[val[2]],})},})

4.日期时间选择器（分）

（1）示例代码：“pages/data3/data3”

data3.WXML

<view><view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}} {{hour}}:{{minute}}<label style="float:right;margin-right:10px;">确定</label></view><view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;"><view class="time-title">年</view><view class="time-title">月</view><view class="time-title">日</view><view class="time-title">时</view><view class="time-title">分</view></view><picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"><picker-view-column class="picker-text"><view wx:for="{{years}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{months}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{days}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{hours}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{minutes}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column></picker-view></view>

data3.WXSS

.time-title{float:left;width:20%;text-align:center;color:#45BCE8}.picker-text{text-align:center;}

data3.JS

// 定义年、月、日、时、分、秒的数组都为空const date = new Date()const years = []const months = []const days = []const hours = []const minutes = []var thisMon = date.getMonth();var thisDay = date.getDate();// 获取年for (let i = ; i <= date.getFullYear() + 1; i++) {years.push(i)}// 获取月份for (let i = date.getMonth(); i <= 11; i++) {var k = i;if (0 <= i && i < 9) {k = "0" + (i + 1);} else {k = (i + 1);}months.push(k)}if (0 <= thisMon && thisMon < 9) {thisMon = "0" + (thisMon + 1);} else {thisMon = (thisMon + 1);}if (0 <= thisDay && thisDay < 10) {thisDay = "0" + thisDay;}// 获取日期var totalDay = mGetDate(date.getFullYear(), thisMon);for (let i = 1; i <= 31; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}days.push(k)}// 获取小时for (let i = 0; i <= 23; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}hours.push(k)}// 获取分钟for (let i = 0; i <= 59; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}minutes.push(k)}// 给新的日期赋值function mGetDate(year, month) {var d = new Date(year, month, 0);return d.getDate();}Page({// 页面初始数据data: {years: years,year: date.getFullYear(),months: months,month: thisMon,days: days,day: thisDay,value: [1, thisMon - 1, thisDay - 1, 0, 0],hours: hours,hour: "00",minutes: minutes,minute: "00",},// 获取新的日期和时间bindChange: function (e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],month: this.data.months[val[1]],day: this.data.days[val[2]],hour: this.data.hours[val[3]],minute: this.data.minutes[val[4]],})}})

5.日期时间选择器（秒）

（1）示例代码：“pages/data4/data4”

data4.WXML

<view><view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}} {{hour}}:{{minute}}:{{min}}<label style="float:right;margin-right:10px;">确定</label></view><view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;"><view class="time-title">年</view><view class="time-title">月</view><view class="time-title">日</view><view class="time-title">时</view><view class="time-title">分</view><view class="time-title">秒</view></view><picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"><picker-view-column class="picker-text"><view wx:for="{{years}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{months}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{days}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{hours}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{minutes}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column class="picker-text"><view wx:for="{{mins}}" wx:key='{{index}}' style="line-height: 50px">{{item}}</view></picker-view-column></picker-view></view>

data4.WXSS

.time-title{float:left;width:16%;text-align:center;color:#45BCE8}.picker-text{text-align:center;}

data4.JS

// 定义年、月、日、时、分、秒的数组都为空const date = new Date()const years = []const months = []const days = []const hours = []const minutes = []const mins = []var thisMon = date.getMonth();var thisDay = date.getDate();// 获取年for (let i = ; i <= date.getFullYear()+1; i++) {years.push(i)}// 获取月份for (let i = date.getMonth(); i <= 11; i++) {var k = i;if (0 <= i && i < 9) {k = "0" + (i+1);}else{k = (i + 1);}months.push(k)}if (0 <= thisMon && thisMon<9){thisMon = "0" + (thisMon + 1);}else{thisMon = (thisMon + 1);}if (0 <= thisDay && thisDay<10){thisDay ="0"+thisDay;}// 获取日期var totalDay = mGetDate(date.getFullYear(), thisMon); for (let i = 1; i <= 31; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}days.push(k)}// 获取小时for (let i = 0; i <= 23; i++) {var k=i;if(0<=i&&i<10){k="0"+i}hours.push(k)}// 获取分钟for (let i = 0; i <= 59; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}minutes.push(k)}// 获取秒for (let i = 0; i <= 59; i++) {var k = i;if (0 <= i && i < 10) {k = "0" + i}mins.push(k)}// 给新的日期赋值function mGetDate(year, month) {var d = new Date(year, month, 0);return d.getDate();}Page({// 页面初始数据data: {years: years,year: date.getFullYear(),months: months,month: thisMon,days: days,day: thisDay,value: [1,thisMon-1,thisDay-1,0,0],hours: hours,hour: "00",minutes: minutes,minute: "00",mins: mins,min: "00",},// 获取新的日期和时间bindChange: function (e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],month: this.data.months[val[1]],day: this.data.days[val[2]],hour: this.data.hours[val[3]],minute: this.data.minutes[val[4]],min: this.data.mins[val[5]],})}})

四．基于picker 进行完善的日期时间选择器。

（2）在app.json 中的pages里直接新建目录"pages/目录名/里面四个文件名"。推荐使用，比较方便快捷。

(3)引用外部JS

如图所示：点击左上角+ ，之后点击目录，建一个与pages平级的目录（我这里起名为style），用来放一些公用的JS、WXSS，右键点击style，新建JS（我这里起名为dateTimePicker.js），将公用JS的JS写完整。

注意：这里所有的目录名和文件名只能用英文和数字命名，不能用汉字。

2.示例代码：pages/data/data

data.WXML

<view><view class='a'>时间选择器（选择时分）</view><picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime"><view class='b'>当前选择: {{time}} </view></picker></view><view><view class='a'>日期选择器（选择年月日）</view><picker mode="date" value="{{date}}" start="-10-01" end="-10-08" bindchange="changeDate"><view class='b'>当前选择: {{date}}</view></picker></view><view><view class='a'>日期时间选择器（精确到秒）</view><picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}"><view class='b'>当前选择: {{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><view class='a'>日期时间选择器（精确到分）</view><picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}"><view class='b'>当前选择: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}</view></picker></view>

data.WXSS

.a{margin-top: 15px;background-color: yellow;height: 35px;width: 100%;text-align: center;line-height: 35px;}.b{margin-top: 2px;background-color:aquamarine;height: 25px;width: 100%;text-align: center;line-height: 25px;}

data.JS

// 引入外部公用JSvar dateTimePicker = require('../../style/dateTimePicker.js');Page({// 页面初始数据data: {date: '-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});}})

2.引用外部JS

dateTimePicker.js