picker-view日期选择器

小程序-时间选择器（picker-view）
一、功能介绍：
基于picker-view组件实现嵌入页面的选择器，用来实现日期选择器和时间选择器，可以更便捷、简单的选择时间日期。

二、使用方法：
点击页面时间，弹出悬浮窗，悬浮窗内是时间选择器，选定时间日期后点击确定即可。

三、效果展示：

1、页面：

2、日期选择器：

3、时间选择器：

4、精确到分的选择器：

四、示例代码：
1、日期选择器：

WXML代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
<view class="time_text">{{year}}年{{month}}月{{day}}日</view>
<picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 500rpx;" indicator-style="height: 50px;" class="view_picker" value="{{value}}" bindchange="bindChange">
<picker-view-column style='margin-left: 20rpx;'>
<view wx:for="{{years}}" class="view_picker_text" wx:key="{{index}}">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" class="view_picker_text" wx:key="{{index}}">{{item}}月</view>
</picker-view-column>
<picker-view-column style='margin-right: 20rpx;'>
<view wx:for="{{days}}" class="view_picker_text" wx:key="{{index}}">{{item}}日</view>
</picker-view-column>
</picker-view>

<button style='width:100%;color:blue;' bindtap="go">确定</button>
</view>
<button bindtap="submit">日期选择</button>
WXSS代码
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 648rpx;
height: 748rpx;
position: fixed;
top: 35%;
left: 0;
z-index: 9999;
margin: -270rpx 50rpx;
background-color: rgb(233, 235, 232);
border-radius: 36rpx;
display: flex;
flex-direction: column;
align-items: center;
}

.time_text{
text-align: center;
font-size:60rpx;
}
.view_picker{
margin-top: 20rpx;
margin-bottom: 20rpx; 
}
.view_picker_text{
padding-left:35rpx;
display: flex;
align-items: center;
justify-content: center;
}
JS代码
// 定义初始日期为当前日期
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 根据年月获取当月的总天数
let getDays = function (year, month) {
if (month === 2) {
return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
} else {
return daysInMonth[month - 1]
}
}
// 根据年月日设置当前月有多少天 并更新年月日数组
let setDate = function (year, month, day, _this) {
let daysNum = year === nowYear && month === nowMonth ? nowDay : getDays(year, month)
day = day > daysNum ? 1 : day
let monthsNum = year === nowYear ? nowMonth : 12
let years = []
let months = []
let days = []
let yearIndex = 9999
let monthIndex = 0
let dayIndex = 0
// 重新设置年份列表
for (let i = 1990; i <= nowYear; i++) {
years.push(i)
}
years.map((v, idx) => {
if (v === year) {
yearIndex = idx
}
})
// 重新设置月份列表
for (let i = 1; i <= monthsNum; i++) {
var k = i;
months.push(k)
}
months.map((v, idx) => {
if (v === month) {
monthIndex = idx
}
})
// 重新设置日期列表
for (let i = 1; i <= daysNum; i++) {
var k = i;
days.push(k)
}
days.map((v, idx) => {
if (v === day) {
dayIndex = idx
}
})

_this.setData({
//时间列表参数
years: years,
months: months,
days: days,
//选中的日期
year: year,
month: month,
day: day,
value: [yearIndex, monthIndex, dayIndex],
})
}


Page({

data: {
//时间列表参数
flag: false,
years: [],
months: [],
days: [],
//选中的日期
year: nowYear,
month: nowMonth,
day: nowDay,
value: [9999, 1, 1],

showModal: false
},

submit: function () {
this.setData({
showModal: true
})
},

preventTouchMove: function () {

},

go: function () {
this.setData({
showModal: false
})
},

onLoad: function (options) {
setDate(this.data.year, this.data.month, this.data.day, this);
},
bindChange: function (e) {
let val = e.detail.value
setDate(this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this)
}

})

2、时间选择器：

WXML代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
<view class="time_text">{{hour}}:{{minute}}:{{second}}</view>

<picker-view style="width: 100%; height: 500rpx;" indicator-style="height: 50px;" class="view_picker" value="{{value}}" bindchange="bindChange">
<picker-view-column style='margin-left: 20rpx;'>
<view wx:for="{{hours}}" wx:key='{{index}}' class="view_picker_text">{{item}}:</view>
</picker-view-column>

<picker-view-column>
<view wx:for="{{minutes}}" wx:key='{{index}}' class="view_picker_text">{{item}}:</view>
</picker-view-column>

<picker-view-column style='margin-right: 20rpx;'>
<view wx:for="{{seconds}}" wx:key='{{index}}' class="view_picker_text">{{item}}</view>
</picker-view-column>

</picker-view>
<button style='width:100%;color:blue;' bindtap="go">确定</button>
</view>

<button bindtap="submit">日期选择</button>
WXSS代码
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 648rpx;
height: 748rpx;
position: fixed;
top: 35%;
left: 0;
z-index: 9999;
margin: -270rpx 50rpx;
background-color: rgb(233, 235, 232);
border-radius: 36rpx;
display: flex;
flex-direction: column;
align-items: center;
}

.time_text{
text-align: center;
font-size:60rpx;
}
.view_picker{
margin-top: 20rpx;
margin-bottom: 20rpx; 
}
.view_picker_text{
padding-left:35rpx;
display: flex;
align-items: center;
justify-content: center;
}
JS代码
// 定义时、分、秒的数组都为空
const date = new Date()
const hours = []
const minutes = []
const seconds = []

// 获取小时
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
}
seconds.push(k)
}

Page({
// 页面初始数据
data: {
hours: hours,
hour: "00",
minutes: minutes,
minute: "00",
seconds: seconds,
second: "00",
// showModal: false
},
submit: function () {
this.setData({
showModal: true
})
},

preventTouchMove: function () {

},

go: function () {
this.setData({
showModal: false
})
},
// 获取新的时间
bindChange: function (e) {
const val = e.detail.value
this.setData({
hour: this.data.hours[val[0]],
minute: this.data.minutes[val[1]],
second: this.data.seconds[val[2]],
})
},
})

3、精确到分的选择器：

WXML代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">

<view style="text-align:center;font-size:50rpx;">{{year}}年{{month}}月{{day}}日 {{hour}}:{{minute}}</view>

<picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 500rpx;" indicator-style="height: 50px;" class="view_picker" value="{{value}}" bindchange="bindChange">

<picker-view-column>
<view wx:for="{{years}}" wx:key='{{index}}' class="view_picker_text">{{item}}年</view>
</picker-view-column>

<picker-view-column>
<view wx:for="{{months}}" wx:key='{{index}}' class="view_picker_text">{{item}}月</view>
</picker-view-column>

<picker-view-column>
<view wx:for="{{days}}" wx:key='{{index}}' class="view_picker_text">{{item}}日</view>
</picker-view-column>

<picker-view-column>
<view wx:for="{{hours}}" wx:key='{{index}}' class="view_picker_text">{{item}}：</view>
</picker-view-column>

<picker-view-column>
<view wx:for="{{minutes}}" wx:key='{{index}}' class="view_picker_text">{{item}}</view>
</picker-view-column>
</picker-view>

<button style='width:100%;color:blue;' bindtap="go">确定</button>
</view>
<button bindtap="submit">日期选择</button>

WXSS代码
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 648rpx;
height: 748rpx;
position: fixed;
top: 35%;
left: 0;
z-index: 9999;
margin: -270rpx 50rpx;
background-color: rgb(233, 235, 232);
border-radius: 36rpx;
display: flex;
flex-direction: column;
align-items: center;
}

.time_text{
text-align: center;
font-size:60rpx;
}
.view_picker{
margin-top: 20rpx;
margin-bottom: 20rpx; 
}
.view_picker_text{
/* padding-left:35rpx; */
display: flex;
align-items: center;
justify-content: center;
}

JS代码
// pages/a/a.js
const date = new Date();//获取系统日期
const years = []
const months = []
const days = []
const hours = []
const minutes = []
const bigMonth = [1, 3, 5, 7, 8, 10, 12]

//将日期分开写入对应数组
//年
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);
}
// 获取小时
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)
}
Page({

data: {

years: years,
year: date.getFullYear(),

months: months,
month: 2,

days: days,
day: 22,

value: [9999, 1, 1],

hours: hours,
hour: "00",

minutes: minutes,
minute: "00",

},

submit: function () {
this.setData({
showModal: true
})
},

preventTouchMove: function () {

},

go: function () {
this.setData({
showModal: false
})
},

//判断元素是否在一个数组

contains: function (arr, obj) {

var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return true;
}
}
return false;
},

setDays: function (day) {
const temp = [];
for (let i = 1; i <= day; i++) {
temp.push(i)
}

this.setData({
days: temp,
})

},

//选择滚动器改变触发事件

bindChange: function (e) {

const val = e.detail.value;

//判断月的天数

const setYear = this.data.years[val[0]];

const setMonth = this.data.months[val[1]];

const setDay = this.data.days[val[2]];

const setHour = this.data.hours[val[3]];

const setMinute = this.data.minutes[val[4]];

// console.log(setYear + '年' + setMonth + '月' + setDay + '日');

//闰年

if (setMonth === 2) {

if (setYear % 4 === 0 && setYear % 100 !== 0) {

// console.log('闰年')

this.setDays(29);

} else {

// console.log('非闰年')

this.setDays(28);

}

} else {

//大月

if (this.contains(bigMonth, setMonth)) {

this.setDays(31)

} else {

this.setDays(30)

}

}

this.setData({

year: setYear,

month: setMonth,

day: setDay,

hour: setHour,

minute: setMinute

})

}

})