How to realize the date and time component by WeChat Mini Programs

This article mainly introduces WeChat Mini Programs how to achieve the date and time component, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

As shown in the figure

Step 1: create a new picker component file

1PickerTime.js component code content

/ / component/pickerTime/pickerTime.jsComponent (attribute list of {/ * component * / properties: {date: {/ / attribute name type: null, / / type (required). Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: null / / attribute initial value (optional) If it is not specified, a}, startDate: {type: null, / / type (required) will be selected. Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: null / / attribute initial value (optional) If it is not specified, a}, endDate: {type: null, / / type (required) will be selected. Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: null / / attribute initial value (optional) If it is not specified, a}, disabled: {type: null, / / type (required) will be selected. Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: false / / attribute initial value (optional) If it is not specified, a}, placeholder: {type: null, / / type (required) will be selected. Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: null / / attribute initial value (optional) If not specified, a}} will be selected according to the type, / * initial data of the component * / data: {pickerArray: [], / / date control data list pickerIndex: [], / date control selected index chooseIndex: [], / date control confirms the selected index chooseArray: [], / / date control confirms the selected list stDate:'' / / start date enDate:'/ / end date}, / * component method list * / methods: {_ onInit () {let date = new Date () If (this.data.date! = null) {let str = this.data.date; str = str.replace (/-/ g, "/"); date = new Date (str);} let pickerArray = this.data.pickerArray; / / console.log (date.getFullYear ()); / / default let year = []; let month = [] Let day = []; let time = []; let division = []; let startDate =''; let endDate =''let tpData = {}; if (this.data.startDate! = null & & this.data.endDate = = null) {/ / if there is a start time, the default end time is 2099 startDate = this._getDefaultDate (this.data.startDate) EndDate = this._getDefaultDate ("2099-12-31 23:59"); tpData = this._getModify (date, startDate, endDate);} if (this.data.endDate! = null & & this.data.startDate = = null) {/ / if there is an end time and no start time, the default setting is 1900 startDate = this._getDefaultDate ("1900-01-01 00:00") EndDate = this._getDefaultDate (this.data.endDate); tpData = this._getModify (date, startDate, endDate);} if (this.data.endDate! = null & & this.data.startDate! = null) {startDate = this._getDefaultDate (this.data.startDate); endDate = this._getDefaultDate (this.data.endDate); tpData = this._getModify (date, startDate, endDate) } / / console.log (year); if (this.data.startDate = = null & & this.data.endDate = = null) {startDate = this._getDefaultDate ("1901-01-01 00:00"); endDate = this._getDefaultDate ("2099-12-31 23:59"); tpData = this._getModify (date, startDate, endDate) } if (date > endDate | | date < startDate) {this.setData ({placeholder: "default date is not in the time range"}) return;} / / console.log (division); pickerArray [0] = tpData.year; pickerArray [1] = tpData.month; pickerArray [2] = tpData.day; pickerArray [3] = tpData.time PickerArray [4] = tpData.division Let mdate = {date: date, year: date.getFullYear () +'', month: date.getMonth () + 1 < 10? 0' + (date.getMonth () + 1): date.getMonth () + 1 +'', day: date.getDate () < 10?'0' + date.getDate (): date.getDate () +'' Time: date.getHours () < 10?'0' + date.getHours (): date.getHours () +'', division: date.getMinutes () < 10? 0' + date.getMinutes (): date.getMinutes () +'} mdate.placeholder = mdate.year +'-'+ mdate.month +'-'+ mdate.day +'+ mdate.time +':'+ mdate.division This.setData ({pickerArray, pickerIndex: tpData.index, chooseIndex: tpData.index, chooseArray: pickerArray, placeholder: this.data.placeholder! = null? This.data.placeholder: mdate.placeholder, stDate: startDate, enDate: endDate}) / / console.log (date); / / initialization does not return date if (this.data.placeholder = = null) {this.triggerEvent ('onPickerChange', mdate);} / console.log (this.data.pickerArray); / / console.log (this._getNumOfDays (2018, 10)) }, / * / _ getDefaultDate (date) {date = date.replace (/-/ g, "/"); return new Date (date) }, / * get the start date, end date, middle date * @ param {date} newDate default date * @ param {date} startDate set start date * @ param {date} stopDate set end date * @ returns data includes year, month, day, hour score group * / _ getModify (newDate, startDate, stopDate) {let data = {year: [], month: [] Day: [], time: [], division: [], index: [0pje 0re0j0j0re0]} let nYear = newDate.getFullYear () Let nMonth = newDate.getMonth () + 1; let nDay = newDate.getDate (); let nHours = newDate.getHours (); let nMinutes = newDate.getMinutes (); let tYear = startDate.getFullYear (); let tMonth = startDate.getMonth () + 1; let tDay = startDate.getDate (); let tHours = startDate.getHours (); let tMinutes = startDate.getMinutes (); let pYear = stopDate.getFullYear () Let pMonth = stopDate.getMonth () + 1; let pDay = stopDate.getDate (); let pHours = stopDate.getHours (); let pMinutes = stopDate.getMinutes (); for (let I = tYear; I