微信小程序日期插件封装-年月日时，只可选当前时间之后时间
本插件在他人基础上修改
image.png
date-picker.js:
// components/pickerYMDHM/pickerYMDHM.js
Component({
/**
* 组件的属性列表
*/
properties: {
placeholder: {
type: null,
value: null
},
value: {
type: null,
value: null
}
},
/**
* 组件的初始数据
*/
data: {
pickerArray: [],
select: [0, 0, 0, 0],
pickerChanged: [0,0,0,0]
},
/**
* 组件的方法列表
*/
methods: {
onInit() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const horus = date.getHours()
const yearArr = this.getLoopArray(year, year + 100, '年')
const monthArr = this.getLoopArray(month, 12, '月')
const dayArr = this.getMonthDay(year, month, day)
const hoursArr = this.getLoopArray(horus, 23, '时')
this.setData({
pickerArray: [yearArr, monthArr, dayArr, hoursArr]
})
},
withData(param){
return param < 10 ? '0' + param : '' + param;
},
getMonthDay(year, startMonth, startDay) {
startMonth = this.withData(startMonth)
startDay = this.withData(startDay)
let flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = [];
switch (startMonth) {
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12':
array = this.getLoopArray(startDay, 31, '日')
break;
case '04':
case '06':
case '09':
case '11':
array = this.getLoopArray(startDay, 30, '日')
break;
case '02':
array = flag ? this.getLoopArray(startDay, 29, '日') : this.getLoopArray(startDay, 28, '日')
break;
default:
array = this.getLoopArray(1, 31, '日')
}
return array;
},
getLoopArray(start, end, unit) {
start = Number(start)
end = Number(end)
const arr = []
for(let i = start; i <= end; i++) {
arr.push({
id: i < 10 ? '0' + i : '' + i , name: (i < 0 ? '0' + i : '' + i)+ unit
})
}
return arr
},
createdPicker() {
const date = new Date()
const currentYear = date.getFullYear()
const currentMonth = date.getMonth() + 1
const currentDay = date.getDate()
const currentHorus = date.getHours()
const pickerChanged = this.data.pickerChanged
let [yearArr, monthArr, dayArr, hoursArr] = this.data.pickerArray
const changedYear = yearArr[pickerChanged[0]]
const changedMonth = monthArr[pickerChanged[1]]
const changedDay = dayArr[pickerChanged[2]]
const changedHours = hoursArr[pickerChanged[3]]
if (pickerChanged[0] != 0) {
monthArr = this.getLoopArray(1, 12, '月')
dayArr = this.getMonthDay(changedYear, changedMonth, 0)
hoursArr = this.getLoopArray(1, 23, '时')
} else {
monthArr = this.getLoopArray(currentMonth, 12, '月')
if (pickerChanged[1] != 0) {
dayArr = this.getMonthDay(changedYear, changedMonth, 0)
hoursArr = this.getLoopArray(1, 23, '时')
} else {
dayArr = this.getMonthDay(currentYear, currentMonth, currentDay)
if (pickerChanged[2] != 0) {
hoursArr = this.getLoopArray(1, 23, '时')
} else {
hoursArr = this.getLoopArray(currentHorus, 23, '时')
}
}
}
this.setData({
pickerArray: [yearArr, monthArr, dayArr, hoursArr],
})
},
pickerColumnChange(e) {
const column = e.detail.column, value = e.detail.value
const pickerArray = this.data.pickerArray
const pickerChanged = this.data.pickerChanged
pickerChanged[column] = value
if(column == 0) {
pickerChanged[1] = 0
pickerChanged[2] = 0
pickerChanged[3] = 0
}
if (column == 1) {
pickerChanged[2] = 0
pickerChanged[3] = 0
}
if (column == 2) {
pickerChanged[3] = 0
}
this.setData({
pickerChanged: pickerChanged
})
this.createdPicker()
},
pickerChange(e) {
const selectedIndex = e.detail.value
const pickerArray = this.data.pickerArray
console.log(pickerArray, selectedIndex)
const dateStr = pickerArray[0][selectedIndex[0]].id + '-' + pickerArray[1][selectedIndex[1]].id + '-' + pickerArray[2][selectedIndex[2]].id + ' ' + pickerArray[3][selectedIndex[3]].id
this.triggerEvent('onPickerChange', dateStr);
this.setData({
value: dateStr
})
}
},
ready() {
this.onInit();
},
lifetimes: {
ready() {
// console.log('进入ready节点=', this.data.date);
this.onInit();
}
}
})
date-picker.json
{
"component": true,
"usingComponents": {}
}
date-picker.wxml
<!--components/pickerYMDHM/pickerYMDHM.wxml-->
<view class="picker-class">
<picker style="width: 100%;" disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel ="pickerCancel" range="{{pickerArray}}" range-key="{{'name'}}">
<view class="{{value ? 'value-style' : 'placeholder'}}">
{{value ? value : placeholder}}
</view>
</picker>
</view>
date-picker.wxss
.picker-class {
width: 300rpx;
height: 100%;
display: flex;
align-items: center;
}
picker {
height: 100%;
display: flex;
align-items: center;
width: 100%;
}
.placeholder {
color: #999FB1;
width: 300rpx;
height: 60rpx;
line-height: 60rpx;
}
.value-style {
color: #131936;
width: 300rpx;
height: 60rpx;
line-height: 60rpx;
}
使用方法：
image.png
commodity.json
{
"navigationBarTitleText": "商品管理",
"usingComponents": {
"date-picker": "/components/date-picker/date-picker"
}
}
commodity.wxml
<view class="content-item">
<view class="item-title">售卖截至:<text class="require">*</text></view>
<view class="item-value">
<view class="input-value">
<date-picker placeholder = "{{placeholder}}" value="{{updataForm.stop_sale_date}}" class="input-value" bind:onPickerChange="onPickerChange" class="">
</date-picker>
</view>
</view>
commodity.js
// pages/commodity/commodity.js
Page({
data: {
placeholder:'请选择时间',
updataForm: {}
},
onPickerChange (e) {
const date = e.detail
this.data.updataForm.stop_sale_date = date
},
})
