微信小程序自带的选择时间组件，只能选择年月日，不能选择到时分秒，需要重新封装组件。
首选封装一个为datetime-picker组件在components文件下。
datetime-picker.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>datetime-picker.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()
}
}
});datetime-picker.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;
}datetime-picker.json
{
"component": true,
"usingComponents": {}
}组件定义好之后，开始引用组件。在父组件的json中引入此组件。
父组件.json
{
"navigationBarTitleText": "装车",
"navigationBarBackgroundColor": "#5583FD",
"navigationBarTextStyle": "white",
"usingComponents": {
"choiceimg":"/components/choiceimg/choiceimg",
"time-picker": "/components/datetime-picker/datetime-picker"
}
}
父组件.wxml
<time-picker mode="{{mode}}" class="picker" placeholder="请选择时间" bind:onPickerChange="bindCheckinDateChange"></time-picker>
父组件.js
在data中定义mode，是控制当前子组件是选择年月日、年月日时分秒、时分秒三种类型。
mode: 'dateTime'
在change事件中进行赋值
bindCheckinDateChange(e){
console.log(e.detail.value,'e');
this.setData({
registrationdate:e.detail.value,
"form.loading_date":e.detail.value
})
},