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

This article introduces you how to analyze the Vue2 cube-ui time selector, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Preface

Vue2 integrates cube-ui time selector (for those with a little bit of foundation)

I. demand and effect demand

We need to increase the search time in the case of the original search

Effect.

Second, the code implements index.vue (html) to

Parsing:

Input box that comes with cube-input cube.

V-on v-on listening event. Focus refers to the event triggered after the input box is focused. If the state is disabled, it is not triggered.

V-model bidirectional binding (for time display)

Maximum length of maxlength

Datedata () {return {/ / start time startTime:', / / end time endTime:'' / / time identification timeIdentifying:''} methodsmethods: {/ / monitor departure selection time showMinPicker (time) {if (! this.minPicker) {this.minPicker = this.$createDatePicker ({title: 'select time', visible: true, / / minimum time min: new Date (2000, 0,1) / / maximum time max: new Date (2099, 12, 1), / / current time value: new Date (), / / display format format: {year: 'YYYY', month:' MM', date: 'DD'} / / display how many columns columnCount: 3, / / onSelect: this.selectHandler after the time is determined, / / onCancel: this.cancelHandler} after the time is cancelled)} / / Select the time flag this.timeIdentifying = time / / display this.minPicker.show ()} / / choose time to determine that the last three parameters are in different time formats May decide selectHandler (selectedTime, selectedText, formatedTime) {let time =''for (let index = 0) according to your own needs Index < selectedText.length Index++) {if (index = (selectedText.length-1)) {time + = selectedText [index]} else {time + = selectedText [index] +'-'}} console.log ('start modifying') if (this.timeIdentifying = 'startTime') {console.log (' modify startTime') this.startTime = time} Else if (this.timeIdentifying = = 'endTime') {console.log (' modify endTime') this.endTime = time} console.log ('end modification')} / / cancel the event cancelHandler () {/ / clear the selected time this.startTime =''this.endTime ='}} test effect

3. Reference input

TimePicker (time selector)

On how to parse the Vue2 cube-ui time selector to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.