小程序自带的组件中有日期跟时间的picker,但没有日期+时间picker组件,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天。
1、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-DDHH:mm:ss),还有dateValue接收的是一个Date对象,日期修改时触发change事件,把date跟dateString传入事件参数e.detail中
- const leftPad0 = function(v, n) {
- !v && v = ""// v || v = "" // 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
- })
- }
- })
-