微信小程序的picker是一個功能強大的組件,它可以是一個普通選擇器,也可以是多項選擇器,也可以是時間、日期、省市區選擇器。
官方文檔在這里
這里講一下date picker的用法。
<view class="section"><view class="section__title">日期選擇器</view><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"><view class="picker">當前選擇: {{date}}</view></picker>
</view>
bindDateChange: function(e) {console.log('picker發送選擇改變,攜帶值為', e.detail.value)this.setData({date: e.detail.value})}
這里的mode選擇為“date”,這個時間格式一般是“2025-01-24”這樣的格式。
實際從bindDateChange中拿到的“e.detail.value”的值包含了年月日,但是具體的格式跟手機系統設置的格式相關。
"start"和"end"指定了時間限定的日期。
這里還有一個參數"fields",可以選擇year, month和day。
如果選擇"day", 那么選擇框里面可以選擇年、月和日了,而且從bindDateChange中拿到的“e.detail.value”的值包含了年月日,跟默認是一樣的。
如果選擇"year", 那么選擇框里面只能選擇年份了,而且從bindDateChange中拿到的“e.detail.value”的值只包含了年,沒有其他信息了。
<view class="container"><picker mode="date" fields="year" value="{{date}}" bindchange="bindDateChange">{{date}}</picker>
</view>
如果選擇"month", 那么選擇框里面可以選擇年和月份了,適合于你只需要顯示年份和月份的格式,而且從bindDateChange中拿到的“e.detail.value”的值包含了年和月。
<view class="container"><picker mode="date" fields="month" value="{{date}}" bindchange="bindDateChange">{{date}}</picker>
</view>