小程序实现日期时间控件picker
小程序自带的组件中有日期跟时间的picker，但就缺个日期时间picker组件，那没办法，只能自己弄一个，这个组件不是很难，比较难的地方是要根据不同年份（是否闰年）跟月份决定一个月里有多少天。
我直接把代码弄出来吧，我这个组件只精确到分，弄到秒也很容易，这个就让大家自己去研究修改了。
date-time-picker.wxml文件
<picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel"> <slot></slot> </picker>
date-time-picker.js文件，由代码可知，组件对外属性是value接收的是日期字符串（YYYY-MM-DD HH:mm:ss），还有dateValue接收的是一个Date对象，日期修改时触发change事件，把date跟dateString传入事件参数e.detail中
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 = 1990; 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 }) } } })
创建一个测试页面
//test.json { "usingComponents": { "date-time-picker": "/components/date-time-picker2/date-time-picker" } } //test.wxml <date-time-picker value="{{value}}" bind:change="handleChange">时间：{{value}}</date-time-picker> //test.js Page({ /** * 页面的初始数据 */ data: { value: "2019-11-11 11:11:00" }, handleChange(e) { console.log(e) this.setData({ value: e.detail.dateString }) } })
效果如下
请发表评论