Analysis of the selector (time, date, region) of the WeChat applet

This article mainly introduces the relevant information on the detailed explanation of the WeChat applet selector (time, date, region) example. The example code and implementation renderings are provided here to help everyone learn and understand this part of knowledge. Friends in need can refer to it. Next

WeChat applet selector (time, date, region)

WeChat applet development Since I have recently learned the development of WeChat applet, based on my own practical results I have sorted out the results and found some examples of date selector, time selector, and region selector. If there are any mistakes, I hope you can correct them.

The controls packaged in WeChat envelopes feel very good and save us developers a lot of trouble. The disadvantage is that we cannot do a lot of customization. I tried the selector today.

Upload gif:

Upload code:

1.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  date: '2016-11-08', 
  time: '12:00', 
  array: ['中国', '巴西', '日本', '美国'], 
  index: 0, 
 }, 
 
 onLoad: function () { 
 
 }, 
 // 点击时间组件确定事件 
 bindTimeChange: function (e) { 
  this.setData({ 
   time: e.detail.value 
  }) 
 }, 
 // 点击日期组件确定事件 
 bindDateChange: function (e) { 
  this.setData({ 
   date: e.detail.value 
  }) 
 }, 
 // 点击国家组件确定事件 
 bindPickerChange: function (e) { 
  this.setData({ 
   index: e.detail.value 
  }) 
 } 
}) 

2.index.wxml
[html] view plain copy
<!--index.wxml--> 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> 
  <view class="picker"> 
   国家：{{array[index]}} 
  </view> 
 </picker> 
</view> 
 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> 
  <view class="picker"> 
   时间 : {{time}} 
  </view> 
 </picker> 
</view> 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> 
  <view class="picker"> 
   日期: {{date}} 
  </view> 
 </picker> 
</view>

①Ordinary selector

The selector is distinguished by mode. The default is the ordinary selector, e.detail The value obtained by .value is the index index of the selected item, and then the value is obtained through the array. When initializing the data, just add the alternative item to the array.

bindPickerChange is triggered when selecting Event, get index.

②Time selector

When mode = time, it is the time selector. start and end are the beginning of the valid time range respectively. and end.Format hh:mm
Trigger bindTimeChange event when selecting, get time.

③Date selector

mode = date, yes Time selector. start and end are the start and end of the valid date range respectively. The bindDateChange event is triggered when the format yyyy-MM-dd
is selected, and the date

is obtained. The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to jump and transfer data in WeChat applet

How to use setData in WeChat applet

How to use the WeChat applet date and time picker

# #

The above is the detailed content of Analysis of the selector (time, date, region) of the WeChat applet. For more information, please follow other related articles on the PHP Chinese website!