關於小程序框架wepy下 picker實現日期時間的組件，親測能用
找了很多wepy文檔都沒有日期時間封裝好的組件，這裏給大家分享一個wepy實現日期時間的組件封裝，雖然不是很完整能達到每個人想要的效果
<!-- 子組件 common.wepy -->
<template>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input value="{{time}}" placeholder="選擇時間"/>
</picker>
</template>
<script>
import wepy from '@wepy/core';
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
const seconds = [];
//獲取年
for (let i = 2018; i <= date.getFullYear() + 5; i++) {
years.push("" + i);
}
//獲取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
}
//獲取日期
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
}
//獲取小時
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
//獲取分鐘
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
}
//獲取秒
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
seconds.push("" + i);
}
wepy.component ({
data : {
time: '',
multiArray: [years, months, days, hours, minutes, seconds],
multiIndex: [0, 9, 16, 10, 17, 0],
choose_year: '',
},
methods : {
//獲取時間日期
bindMultiPickerChange: function(e) {
console.log('picker發送選擇改變，攜帶值爲',e.$wx.detail.value)
this.multiIndex = e.$wx.detail.value;
const index = this.multiIndex;
const year = this.multiArray[0][index[0]];
const month = this.multiArray[1][index[1]];
const day = this.multiArray[2][index[2]];
const hour = this.multiArray[3][index[3]];
const minute = this.multiArray[4][index[4]];
const seconds = this.multiArray[5][index[5]];
// console.log(`${year}-${month}-${day}-${hour}-${minute}`);
this.time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute; //頁面顯示不帶秒
let time1 = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + seconds; //傳給後臺帶秒
this.$emit('getStartTime', time1); //開始時間
this.$emit('getEndTime', time1); //結束時間
// console.log(this.time)
},
//監聽picker的滾動事件
bindMultiPickerColumnChange: function(e) {
//獲取年份
if (e.$wx.detail.column == 0) {
let choose_year = this.multiArray[e.$wx.detail.column][e.$wx.detail.value];
console.log(choose_year);
this.choose_year = choose_year;
}
//console.log('修改的列爲', e.detail.column, '，值爲', e.detail.value);
if (e.$wx.detail.column == 1) {
let num = parseInt(this.multiArray[e.$wx.detail.column][e.$wx.detail.value]);
let temp = [];
if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判斷31天的月份
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp;
} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判斷30天的月份
for (let i = 1; i <= 30; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp;
} else if (num == 2) { //判斷2月份天數
let year = parseInt(this.choose_year);
console.log(year);
if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
for (let i = 1; i <= 29; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp;
} else {
for (let i = 1; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp;
}
}
console.log(this.multiArray[2]);
}
this.multiIndex[e.$wx.detail.column] = e.$wx.detail.value;
},
},
onLoad () {
//設置默認的年份
this.choose_year = this.multiArray[0][0]
}
})
</script>
<style lang="less">
.time-picker{
width: 240rpx;
}
input{
text-align: right;
}
</style>
<!-- 父組件 index.wepy -->
<template>
<view class="container">
<!-- 開始時間 -->
<view class="cell cell-sta">
<view>開始時間</view>
<view><Common @getStartTime="getStartTime"></Common></view>
</view>
<!-- 結束時間 -->
<view class="cell cell-sta">
<view>結束時間</div>
<view><Same @getEndTime="getEndTime"></Same></div>
</view>
</view>
</template>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
params: {
kssj: "",
jzsj: "",
},
methods: {
// 開始時間
getStartTime(data) {
let self = this;
// console.log(data)
if(self.params.jzsj != '' || self.params.jzsj == ''){
let startDate = new Date(data).getTime()
let endDate = new Date(self.params.jzsj).getTime()
if(startDate >= endDate){
wx.showToast({
title: "搶單開始時間不得晚於搶單結束時間",
duration: 3000,
icon: "none"
})
}else{
self.params.kssj = data;
}
}else{
self.params.kssj = data;
}
},
// 結束時間
getEndTime(data) {
let self = this;
if(self.params.kssj != ""){
let startDate = new Date(self.params.kssj).getTime()
let endDate = new Date(data).getTime()
if(startDate >= endDate){
wx.showToast({
title: "搶單結束時間不得早於搶單開始時間",
duration: 3000,
icon: "none"
})
return
}else{
self.params.jzsj = data;
}
}
else{
self.params.jzsj = data;
}
},
},
})
</script>
<config>
{
"navigationBarTitleText":"首頁",
"usingComponents":{
"Common":"~@/components/common",
"Same":"~@/components/common"
}
}
</config>
<style lang="less" scoped>
.cell {
background: #fff;
border-bottom: 1rpx solid #e2e5e9;
}
.cell-sta{
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80rpx;
font-size: 32rpx;
color: #333;
padding: 0 20rpx;
}
</style>
小程序wepy的坑，希望能給大家帶來一點幫助，
默認顯示
點擊選擇顯示
選擇後顯示
