Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

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

2025-03-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report