最近小程序有个需求要使用日期加时间的pick组件 翻了小程序文档似乎没有符合的 手写一个
新建组件picker.js:
Component({
properties: {
disabled: {
type: null,
value: false
},
date: {
type: null,
value: ""
},
},
/**
* 初始数据
*/
data: {
pickerArray: [],
pickerIndex: [],
chooseIndex: [],
chooseArray: [],
dateString: '',
},
methods: {
_onInit() {
let date = new Date();
if (this.data.date != "") {
let str = this.data.date;
str = str.replace(/-/g, "/");
date = new Date(str);
}
let pickerArray = this.data.pickerArray;
//默认选择100年内
let year = [];
for (let i = date.getFullYear()-1; i <= date.getFullYear() + 100; i++) {
year.push({ id: i, name: i + "年" });
}
let month = [];
for (let i = 1; i <= 12; i++) {
month.push({ id: i, name: i + "月" });
}
let dayNum = this._getNumOfDays(date.getFullYear(), date.getMonth() + 1);
let day = [];
for (let i = 1; i <= dayNum; i++) {
day.push({ id: i, name: i + "日" });
}
let time = [];
for (let i = 0; i <= 23; i++) {
if (i < 10) {
time.push({ id: i, name: "0" + i + "时" });
} else {
time.push({ id: i, name: i + "时" });
}
}
let division = [];
for (let i = 0; i <= 59; i++) {
if (i < 10) {
division.push({ id: i, name: "0" + i + "分" });
} else {
division.push({ id: i, name: i + "分" });
}
}
let second = [];
for (let i = 0; i <= 59; i++) {
if (i < 10) {
second.push({ id: i, name: "0" + i + "秒" });
} else {
second.push({ id: i, name: i + "秒" });
}
}
pickerArray[0] = year;
pickerArray[1] = month;
pickerArray[2] = day;
pickerArray[3] = time;
pickerArray[4] = division;
pickerArray[5] = second;
let mdate = {
date: date,
year: date.getFullYear() + '',
month: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',
day: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',
time: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',
division: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + '',
second: date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() + ''
}
mdate.dateString = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division + ':' + mdate.second;
this.setData({
pickerArray,
pickerIndex: [1, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()],
chooseIndex: [1, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()],
chooseArray: pickerArray,
dateString: mdate.dateString
})
this.triggerEvent('onPickerChange', mdate);
},
_getNumOfDays(year, month, day = 0) {
return new Date(year, month, day).getDate()
},
pickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
let indexArr = e.detail.value;
const year = this.data.pickerArray[0][indexArr[0]].id;
const month = this.data.pickerArray[1][indexArr[1]].id;
const day = this.data.pickerArray[2][indexArr[2]].id;
const time = this.data.pickerArray[3][indexArr[3]].id;
const division = this.data.pickerArray[4][indexArr[4]].id;
const second = this.data.pickerArray[5][indexArr[5]].id;
let date = {
date: new Date(year + '-' + month + '-' + day + ' ' + time + ':' + division + ':' + second),
year: year + '',
month: month < 10 ? '0' + month : month + '',
day: day < 10 ? '0' + day : day + '',
time: time < 10 ? '0' + time : time + '',
division: division < 10 ? '0' + division : division + '',
second: second < 10 ? '0' + second : second + ''
}
date.dateString = date.year + '-' + date.month + '-' + date.day + ' ' + date.time + ':' + date.division + ':' + date.second;
this.setData({
chooseIndex: e.detail.value,
chooseArray: this.data.pickerArray,
dateString: date.dateString
})
this.triggerEvent('onPickerChange', date);
},
pickerColumnChange: function (e) {
var data = {
pickerArray: this.data.pickerArray,
pickerIndex: this.data.pickerIndex
};
data.pickerIndex[e.detail.column] = e.detail.value;
if (e.detail.column == 1) {
let dayNum = this._getNumOfDays(data.pickerArray[0][data.pickerIndex[0]].id, e.detail.value + 1);
let day = [];
for (let i = 1; i <= dayNum; i++) {
day.push({ id: i, name: i + "日" });
}
if (dayNum < data.pickerIndex[2] + 1) {
data.pickerIndex[2] = dayNum - 1;
}
data.pickerArray[2] = day;
}
this.setData(data);
},
pickerCancel: function (e) {
this.setData({
pickerIndex: this.data.chooseIndex,
pickerArray: this.data.chooseArray
})
},
},
ready() {
console.log('进入ready外层节点=', this.data.date);
this._onInit();
},
})
在picker.json注册为组件：
在picker.wxml代码：
<view>
<picker disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel ="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
<view class='comp_date'>
{{date}}
</view>
</picker>
</view>
.picker.wxss:
.comp_date{
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #000;
letter-spacing: 0;
height: 110rpx;
line-height: 110rpx;
}
在父组件引入picker:
{
"usingComponents": {
"picker":"/components/picker/picker"
}
}
父组件wxml:
父组件onPickerChange方法：
