文章目录
- 前言
- 一、组件源码
- 二、组件引用
- 三、实际效果
前言
微信小程序默认是没日期和时间组件的，而是分开的，需要使用日期和时间组件需要自己封装。
一、组件源码
代码语言：javascript复制<picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel">
<slot>slot>
picker>const leftPad0 = function(v, n) {
if (!v) {
v = "";
}
let prefix = "";
for (let i = 0; i < n; i ) {
prefix = "0";
}
return (prefix v).substr(-n);
};
const stringToDate = function(str) {
str = str.replace(/-/g, "/");
return new Date(str);
};
const isLeapYear = function(year) {
if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
return true;
}
return false;
};
const now = new Date();
const years = [];
const beginYear = 2022;
for (var i = beginYear; i <= now.getFullYear(); i ) {
years.push(i "年");
}
const months = [];
for (var i = 0; i < 12; i ) {
months.push(leftPad0(i 1, 2) "月");
}
const days = [];
for (var i = 0; i < 31; i ) {
days.push(leftPad0(i 1, 2) "日");
}
const hours = [];
for (var i = 0; i < 24; i ) {
hours.push(leftPad0(i, 2) "时");
}
const minutes = [];
for (var i = 0; i < 60; i ) {
minutes.push(leftPad0(i, 2) "分");
}
Component({
/**
* 组件的属性列表
*/
properties: {
value: String,
dateValue: {
type: Date
}
},
/**
* 组件的初始数据
*/
data: {
valueArray: [0, 0, 0, 0, 0],
rangeValues: [
years,
months,
days,
hours,
minutes
],
pickerYear: beginYear,
pickerMonth: 1
},
observers: {
value: function(v) {
this.setData({
valueArray: this._dateToValueArray(stringToDate(v))
})
},
dateValue: function(date) {
this.setData({
valueArray: this._dateToValueArray(date)
})
},
valueArray: function(v) {
this._settMonthDays(v[0] beginYear, v[1] 1);
}
},
/**
* 组件的方法列表
*/
methods: {
_dateToValueArray(date) {
return [date.getFullYear() - beginYear, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()];
},
_settMonthDays(year, month) {
let monthDays = 31;
switch (month) {
case 2:
monthDays = 28;
if (isLeapYear(year)) {
monthDays = 29;
}
break;
case 4:
case 6:
case 9:
case 11:
monthDays = 30;
break;
}
let days = [];
for (let i = 0; i < monthDays; i ) {
days.push(leftPad0(i 1, 2) "日");
}
this.setData({
pickerYear: year,
pickerMonth: month,
"rangeValues[2]": days
});
},
handleCancel(e) {
this.setData({
valueArray: this.data.valueArray
})
},
handleColumnChange(e) {
if (e.detail.column > 1) return false;
let year = this.data.pickerYear;
let month = this.data.pickerMonth;
if (e.detail.column == 0) {
year = e.detail.value beginYear;
} else if (e.detail.column == 1) {
month = e.detail.value 1;
}
this._settMonthDays(year, month);
},
handleValueChange(e) {
let dateArr = [];
for (let i in e.detail.value) {
let v = this.data.rangeValues[i][e.detail.value[i]];
dateArr.push(v.toString().substr(0, v.length - 1))
}
let dateString = dateArr[0] "-" dateArr[1] "-" dateArr[2] " " dateArr[3] ":" dateArr[4] ":00";
this.triggerEvent('change', {
date: stringToDate(dateString),
dateString
})
}
}
})二、组件引用
代码语言：javascript复制{
"usingComponents": {
"date-time-picker": "/components/date-time-picker/date-time-picker"
}
}<form bindsubmit='formSubmit'>
<view class="cu-form-group">
<view class="title">会议名称</view>
<input name="METTING_NAME" type="number"></input>
</view>
<view class="cu-form-group align-start">
<view class="title">会议内容</view>
<textarea name="METTING_CONTENT" maxlength="-1" placeholder="请输入会议内容"></textarea>
</view>
<view class="cu-form-group align-start">
<view class="title">会议地点</view>
<textarea name="METTING_CONTENT" maxlength="-1" placeholder="请输入会议地点"></textarea>
</view>
<view class="cu-form-group align-start">
<view class="title">会议类型</view>
<textarea name="METTING_CONTENT" maxlength="-1" placeholder="请输入会议类型"></textarea>
</view>
<view class="cu-form-group">
<view class="title">开始时间</view>
<date-time-picker value="{{startDateTime}}" bind:change="startDateTimeChange">请选择>{{startDateTime}}</date-time-picker>
</view>
<view class="cu-form-group">
<view class="title">结束时间</view>
<date-time-picker value="{{endDateTime}}" bind:change="endDateTimeChange">请选择>{{endDateTime}}</date-time-picker>
</view>
<view class="padding flex flex-direction">
<button form-type='submit' class="cu-btn bg-red margin-tb-sm lg">提交</button>
</view>
</form>const util = require('../../../../utils/util')
Page({
/**
* 页面的初始数据
*/
data: {
endDateTime: util.formatTimeG(new Date()),
startDateTime: util.formatTimeG(new Date()),
},
startDateTimeChange(e) {
this.setData({
startDateTime: e.detail.dateString
})
},
endDateTimeChange(e) {
this.setData({
endDateTime: e.detail.dateString
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})三、实际效果
