写组件
js
// Components/dataslect/dateselect.js
const date = new Date();
let years = [];
let months = [];
let days = [];
let hours = [];
let minutes = [];
function getYear(params = 2018) {
//获取年
for (let i = params; i <= date.getFullYear() + 10; i++) {
years.push("" + i);
}
}
//获取月份
function getMonth() {
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
}
}
//获取日期
function getDays() {
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
}
}
//获取小时
function getHours() {
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
}
//获取分钟
function getMinutes() {
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
}
}
Component({
/**
* 组件的属性列表
*/
properties: {
choose_year: {
type: String,
value: 2019,
},
noteInfo: {
type: String,
value: "选择时间",
},
startYear: {
type: Number,
value: 2015,
},
callbackTime: null
},
/**
* 组件的初始数据
*/
data: {
time: '',
multiArray: [],
multiIndex: [0, 9, 16, 10, 17],
},
// created() {
// // 初始化时间
// this.setDate()
// },
/**
* 组件的方法列表
*/
methods: {
// 初始化 数据
setDate() {
getYear(this.data.startYear)
getMonth()
getDays()
getHours()
getMinutes()
this.setData({
multiArray: [years, months, days, hours, minutes]
})
let {
multiIndex, multiArray
} = this.data
console.log(multiIndex, multiArray)
let count = 0
let temp = []
//获取年
for (let i = this.data.startYear; i <= date.getFullYear() + 10; i++) {
if (this.data.choose_year == i) {
temp = multiIndex.map((item, index) => {
if (index == 0) {
item = count
}
return item
})
}
count++
}
this.setData({
multiIndex: temp
})
},
//获取时间日期
bindMultiPickerChange: function(e) {
// console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
const index = this.data.multiIndex;
const year = this.data.multiArray[0][index[0]];
const month = this.data.multiArray[1][index[1]];
const day = this.data.multiArray[2][index[2]];
const hour = this.data.multiArray[3][index[3]];
const minute = this.data.multiArray[4][index[4]];
// console.log(`${year}-${month}-${day}-${hour}-${minute}`);
this.setData({
time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
})
this.triggerEvent( 'getTime',{
time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
})
// console.log(this.data.time);
},
//监听picker的滚动事件
bindMultiPickerColumnChange: function(e) {
//获取年份
if (e.detail.column == 0) {
let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
console.log(choose_year);
this.setData({
choose_year
})
}
//console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
if (e.detail.column == 1) {
let num = parseInt(this.data.multiArray[e.detail.column][e.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.setData({
['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.setData({
['multiArray[2]']: temp
});
} else if (num == 2) { //判断2月份天数
let year = parseInt(this.data.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.setData({
['multiArray[2]']: temp
});
} else {
for (let i = 1; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
}
}
console.log(this.data.multiArray[2]);
}
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
this.setData(data);
}
}
})
wxml
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input value='{{time}}' placeholder='{{noteInfo}}'/>
</picker>
调用组件
wxss
/*
*getTime 自定义方法 用来字父之间传值
* choose_year 默认选择的时间
*startYear 开始的时间
*/
<dateslect id="myComponent" bindgetTime="getTimefn" choose_year="{{2011}}" startYear="{{2000}}">1212</dateslect>
js
Page({
data: {
},
onLoad: function() {
//设置默认的年份
},
onShow() {
// 初始化组建中的时间时间参数
this.selectComponent('#myComponent').setDate()
},
getTimefn(params) {
console.log(params)
}
})