In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.