![微信小程序 picker 封装年月日时分秒插件](https://img-blog.csdnimg.cn/00e1f41b4f67490694e9ea4f71895242.png#pic_center)
html
<picker class="dateTimePicker" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
<view class="tui-picker-detail wrap column-center" style="text-align:right;">
<text style="color:{{(dateTimeWhole||time)?'#333333':'#999999'}};">{{dateTimeWhole || time || params.placeholder ||"请选择时间"}}</text>
</view>
</picker>
js
const App = getApp();
const dateTimePicker = require('../../utils/datePicker.js')
Component({
options: {
addGlobalClass: true,
},
properties: {
time: String,
params: {
type: Object,
value: {
placeholder: '请选择时间',
startDateTime: '2011-03-30 00:00',
endDateTime: '2032-03-30 00:00',
pText: ''
}
},
},
observers: {
'originActiveData': function (params) {
let d = params.map(e => {
return {
time: this.getFormatDate(e.time),
text: e.text,
color: e.color,
}
})
this.setData({
activeData: d
})
this.getInit()
},
"TagDateList": function (params) {
this.getInit()
},
},
data: {
dateTimeArray: null,
dateTime: null,
startDateTime: '',
endDateTime: '',
dateTimeWhole: '',
},
lifetimes: {
attached: function () {
this.setData({
startDateTime: this.data.params.startDateTime,
endDateTime: this.data.params.endDateTime
})
this.initData()
}
},
pageLifetimes: {
show: function () {
this.setData({
startDateTime: this.data.params.startDateTime,
endDateTime: this.data.params.endDateTime
})
this.initData()
},
hide: function () {
},
resize: function (size) {
}
},
methods: {
initData(date) {
this.data.unit = ['年', '月', '日', '时', '分']
this.data.dateTimePicker = dateTimePicker.newDateTimePicker(this.data.startDateTime, this.data.endDateTime, this.data.time)
let obj = this.data.dateTimePicker.render();
let lastArray = obj.dateTimeArray;
let lastTime = obj.dateTime;
for (let i = 0; i < lastArray.length; i++) {
lastArray[i] = lastArray[i].map(m => m + this.data.unit[i])
}
this.data.dateTimeArray = lastArray
this.data.dateTime = lastTime
this.setData({
dateTimeArray: this.data.dateTimeArray,
dateTime: this.data.dateTime
})
},
changeDateTime(e) {
this.data.dateTime = e.detail.value
const year = this.data.dateTimeArray[0][this.data.dateTime[0]].replace(/年/, '')
const month = this.data.dateTimeArray[1][this.data.dateTime[1]].replace(/月/, '')
const day = this.data.dateTimeArray[2][this.data.dateTime[2]].replace(/日/, '')
const hour = this.data.dateTimeArray[3][this.data.dateTime[3]].replace(/时/, '')
const minute = this.data.dateTimeArray[4][this.data.dateTime[4]].replace(/分/, '')
this.data.dateTimeWhole = `${year}-${month}-${day} ${hour}:${minute}`
this.setData({
dateTimeWhole: this.data.dateTimeWhole,
})
console.log(this.data.dateTimeWhole)
this.triggerEvent('getDateString', this.data.dateTimeWhole)
},
changeDateTimeColumn(e) {
const {
column,
value
} = e.detail
let dateTimeTemp = 'dateTime[' + column + ']'
this.setData({
[dateTimeTemp]: value
})
this.data.dateTimePicker.setValue({
dateTimeArray: this.data.dateTimeArray,
dateTime: this.data.dateTime
})
for (let i = 1; i < this.data.dateTime.length; i++) {
if (column == i - 1) {
for (let j = i; j < this.data.dateTime.length; j++) {
let temp = 'dateTime[' + j + ']'
this.setData({
[temp]: 0
})
}
}
let arr = this.data.dateTimePicker.dispatch(i).map(m => m + this.data.unit[i])
let temp1 = 'dateTimeArray[' + i + ']'
this.setData({
[temp1]: arr
})
}
this.setData({
dateTimeArray: this.data.dateTimeArray,
dateTime: this.data.dateTime
})
},
}
})
插件下载地址