微信小程序之时间选择器（包含年，月，日。时，分，秒）自定义组件
一、建立组件
/components/timePicker/index
index.js
// components/timePicker/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
/**
* 组件类型 date:日期(yyyy-MM-dd) time：时间(hh:mm:ss) dateTime: 日期时间(yyyy-MM-dd hh:mm:ss)
*/
mode: {
type: String,
value: 'date',
observer: 'modeChange'
},
disabled: {
type: Boolean,
value: false
},
placeholder: String
},
/**
* 组件的初始数据
*/
data: {
pickerArray: [], //日期控件数据list
pickerIndex: [], //日期控件选择的index
dateString: '' //页面显示日期
},
/**
* 组件的方法列表
*/
methods: {
modeChange: function (newVal, oldVal) {
this.getPickerArray(newVal)
},
//补零
formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
},
//日期时间格式化
formateDateTime(arr) {
let mode = this.data.mode
switch (mode) {
case 'date':
return arr.map(this.formatNumber).join('-')
break;
case 'time':
return arr.map(this.formatNumber).join(':')
break;
case 'dateTime':
return arr.slice(0, 3).map(this.formatNumber).join('-') + ' ' + arr.slice(3, 6).map(this.formatNumber).join(':')
break;
}
},
/**
*
* 获取本月天数
* @param {number} year
* @param {number} month
* @param {number} [day=0] 0为本月0最后一天的
* @returns number 1-31
*/
_getNumOfDays(year, month, day = 0) {
return new Date(year, month, day).getDate();
},
//获取pickerArray
getPickerArray(mode = this.data.mode) {
let date = new Date();
let pickerArray = []
//年
let year = [];
for (let i = date.getFullYear() - 5; i <= date.getFullYear() + 5; i++) {
year.push({
id: i,
name: i + '年'
});
}
let currentYear = date.getFullYear();
let yearIndex = year.findIndex(item => item.id == currentYear);
pickerArray.push({
picker: 'year',
value: year,
pickerIndex: yearIndex
})
//月
let month = [];
for (let i = 1; i <= 12; i++) {
month.push({
id: i,
name: i + '月'
});
}
pickerArray.push({
picker: 'month',
value: month,
pickerIndex: date.getMonth(),
})
//日
let dayNum = this._getNumOfDays(date.getFullYear(), date.getMonth() + 1);
let day = [];
for (let i = 1; i <= dayNum; i++) {
day.push({
id: i,
name: i + '日'
});
}
pickerArray.push({
picker: 'day',
value: day,
pickerIndex: date.getDate() - 1,
})
//时
let time = [];
for (let i = 0; i <= 23; i++) {
time.push({
id: i,
name: this.formatNumber(i)
});
}
pickerArray.push({
picker: 'time',
value: time,
pickerIndex: date.getHours(),
})
//分
let minutes = [];
for (let i = 0; i <= 59; i++) {
minutes.push({
id: i,
name: this.formatNumber(i)
});
}
pickerArray.push({
picker: 'minutes',
value: minutes,
pickerIndex: date.getMinutes(),
})
//秒
let seconds = [];
for (let i = 0; i <= 59; i++) {
seconds.push({
id: i,
name: this.formatNumber(i)
});
}
pickerArray.push({
picker: 'seconds',
value: seconds,
pickerIndex: date.getSeconds(),
})
let pickerIndex = []
//过滤不同mode的pickerArray keys
let formatPickerArray = () => {
switch (mode) {
case 'date':
return ['year', 'month', 'day']
break;
case 'dateTime':
return ['year', 'month', 'day', 'time', 'minutes', 'seconds']
break;
case 'time':
return ['time', 'minutes', 'seconds']
break;
}
}
//过滤不同mode的pickerArray values
let pickerValues = formatPickerArray(mode)
let formatPickers = []
// pickerArray.filter(item =>
// pickerValues.indexOf(item.picker) >= 0
// )
//获取pickers选项和默认选择下标
pickerArray.map(item => {
if (pickerValues.indexOf(item.picker) >= 0) {
pickerIndex.push(item.pickerIndex)
formatPickers.push(item.value)
}
})
this.setData({
pickerArray: formatPickers,
pickerIndex
})
//通过下标获取对应时间
let currentDate = this.getPickerValue(pickerIndex)
this.setData({
dateString: currentDate
})
},
getPickerValue(pickerIndex) {
let date = this.data.pickerArray.map((item, index) =>
// console.log(this.data.pickerArray[index][pickerIndex[index]].id, pickerIndex)
this.data.pickerArray[index][pickerIndex[index]].id
)
let dateString = this.formateDateTime(date)
return dateString
},
pickerChange: function (e) {
let currentDate = this.getPickerValue(e.detail.value)
this.setData({
dateString: currentDate
})
let detail = {
value: currentDate
}
this.triggerEvent('onPickerChange', detail);
},
//月变化时获取当月多少天
pickerColumnChange: function (e) {
let value = e.detail
let year = this.data.pickerArray[0][this.data.pickerIndex[0]].id
if (this.data.mode !== 'time') {
if (value.column === 1) {
let days = this._getNumOfDays(year, value.value + 1)
let day = [];
for (let i = 1; i <= days; i++) {
day.push({
id: i,
name: i + '日'
});
}
this.data.pickerArray[2] = day
this.setData({
pickerArray: this.data.pickerArray
})
}
}
},
pickerCancel: function (e) {}
},
lifetimes: {
attached() {
// 在组件实例进入页面节点树时执行
},
detached() {
// 在组件实例被从页面节点树移除时执行
},
ready() {
this.getPickerArray()
}
}
});
index.json
{
"component": true,
"usingComponents": {}
}
index.wxml
<!-- components/timePicker/index.wxml -->
<view>
<picker disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange"
bindcancel="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}">
<view>
<input placeholder="{{placeholder}}" class="weui-input" disabled="{{true}}" value="{{dateString}}"></input>
</view>
</picker>
</view>
index.wss
/* components/timePicker/index.wxss */
.input_base {
border: 2rpx solid #ccc;
padding-left: 10rpx;
margin-right: 50rpx;
}
.input_h30 {
height: 30px;
line-height: 30px;
}
.col-1 {
-webkit-box-flex: 1;
box-flex: 1;
}
二、引用
/pages/index
index.json
{
"usingComponents": {
"time-picker": "../../../components/timePicker/index"
}
}
index.wxml
<view class="title">时间选择view>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}" wx:key="{{index}}">
<radio value="{{item.value}}" checked="{{item.checked}}" />
{{item.name}}
label>
radio-group>
<time-picker mode="{{mode}}" class="picker" placeholder="请选择时间" bind:onPickerChange="onPickerChange">time-picker>
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
items: [{ name: '日期选择', value: 'date', checked: 'true' }, { name: '时间选择', value: 'time' }, { name: '日期时间选择', value: 'dateTime' }],
mode: 'date'
},
onPickerChange(e) {//返回回调函数
console.log("onPickerChange", e)
},
radioChange: function(e) {
console.log(e)
this.setData({
mode: e.detail.value//获取类型；date年月日；time时分秒；dateTime年月日+时分秒
})
},
onLoad: function() {
},
})
三、效果
mode为date时
mode为time时
mode为dateTime时
