這篇文章給大家分享的是有關(guān)微信小程序中實(shí)現(xiàn)日期選擇器的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

上林網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

微信小程序 選擇器（時(shí)間，日期，地區(qū)）

微信小程序 開發(fā)由于本人最近學(xué)習(xí)微信小程序的開發(fā),根據(jù)自己的實(shí)踐結(jié)果整理了下結(jié)果，對(duì)日期選擇器，時(shí)間選擇器，地區(qū)選擇器做的實(shí)例,有不對(duì)的地方，希望大家指正。

用微信封裝好的控件感覺很好,為我們開發(fā)人員省去了很多麻煩.弊端就是不能做大量的自定義.今天試用了選擇器.

上gif:

上代碼:

1.index.js

//index.js 
//獲取應(yīng)用實(shí)例 
var app = getApp() 
Page({ 
 data: { 
  date: '2016-11-08', 
  time: '12:00', 
  array: ['中國(guó)', '巴西', '日本', '美國(guó)'], 
  index: 0, 
 }, 
 
 onLoad: function () { 
 
 }, 
 // 點(diǎn)擊時(shí)間組件確定事件 
 bindTimeChange: function (e) { 
  this.setData({ 
   time: e.detail.value 
  }) 
 }, 
 // 點(diǎn)擊日期組件確定事件 
 bindDateChange: function (e) { 
  this.setData({ 
   date: e.detail.value 
  }) 
 }, 
 // 點(diǎn)擊國(guó)家組件確定事件 
 bindPickerChange: function (e) { 
  this.setData({ 
   index: e.detail.value 
  }) 
 } 
}) 

2.index.wxml
[html] view plain copy
 
 
  
   
   國(guó)家：{{array[index]}} 
   
  
 
 
 
  
   
   時(shí)間 : {{time}} 
   
  
 
 
  
   
   日期: {{date}} 
   
  

①普通選擇器

選擇器用mode來區(qū)別,默認(rèn)是普通選擇器,e.detail.value拿到的值是選擇了項(xiàng)的索引index,再通過array拿到值.在data里面做初始化的時(shí)候,將備選項(xiàng)加入array即可.

選擇時(shí)觸發(fā)bindPickerChange事件,獲取index.

②時(shí)間選擇器

mode = time時(shí),是時(shí)間選擇器.start,end分別是有效時(shí)間范圍的開始和結(jié)束.格式hh:mm
選擇時(shí)觸發(fā)bindTimeChange事件,獲取time.

③日期選擇器

mode = date時(shí),是時(shí)間選擇器.start,end分別是有效日期范圍的開始和結(jié)束.格式y(tǒng)yyy-MM-dd
選擇時(shí)觸發(fā)bindDateChange事件,獲取date

感謝各位的閱讀！關(guān)于“微信小程序中實(shí)現(xiàn)日期選擇器的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！