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

Today, the editor will share with you the relevant knowledge points about how to achieve Mini Program date-time selector. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

To use the picker component, the scroll selector that the animation pops up from the bottom now supports three selectors, which are distinguished by mode, namely, ordinary selector, time selector, date selector, and normal selector by default.

Look at the corresponding properties:

① ordinary selector

The selector is distinguished by mode. The default is a normal selector. E.detail.value gets the value from the index index of the selected item, and then gets the value through array. When initializing in data, add the option to array.

When selected, the bindPickerChange event is triggered to get the index.

② time selector

When mode = time, it is the time selector. Start and end are the beginning and end of the valid time range, respectively. Format hh:mm

When selected, the bindTimeChange event is triggered to get the time.

③ date Selector

When mode = date, it is the time selector. Start and end are the start and end of the valid date range, respectively. Format yyyy-MM-dd

BindDateChange event is triggered when selecting, and date is obtained.

Specifically, let's look at the code, layout:

Country: {{objectArray [index]}} time: {{times}} date: {{dates}}

Css style:

.section {background:#CABBC7; margin:20rpx Padding:20rpxjs code: Page ({data: {dates: '2016-11-08, times:' 12 times: 0011), objectArray: ['China','UK', 'USA'], index: 0,}, / / Click the time component to determine the event bindTimeChange: function (e) {console.log (who presses) this.setData ({times: e.detail.value})} / Click date component to determine event bindDateChange: function (e) {console.log (e.detail.value) this.setData ({dates: e.detail.value})}, / / Click City component to determine event bindPickerChange: function (e) {console.log (e.detail.value) this.setData ({index: e.detail.value})}

The code is very simple, respectively bind events, click to switch on the Ok.

These are all the contents of this article entitled "how to implement Mini Program date and time Selector". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.