微信小程序 picker 指南：日期与时间选择器

“微信小程序之picker日期和时间选择器” 在微信小程序开发中，picker组件用于创建用户交互的选择器，提供了一种便捷的方式让用户从预设的选项中进行选择。本资源主要介绍了picker的三种模式，分别是自定义数据的默认模式、时间选择器（mode="time"）以及日期选择器（mode="date"）。 1. 默认模式： 默认的picker允许开发者自定义数据，例如创建一个地区选择器。在wxml文件中，通过`<picker>`标签设置`bindchange`事件监听用户的选择变化，并通过`value`属性存储当前选中的值。`range`属性定义了可选的选项数组。例如： ```html <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> ``` 在对应的JS文件中，需要定义`bindPickerChange`事件处理函数，更新`index`的值，并根据`array[index]`显示当前选择。 2. 时间选择器 (mode="time")： 时间选择器用于让用户选择一个具体的时间。在wxml中，设置`mode`属性为"time"，并添加`start`和`end`属性定义可选时间范围，`bindchange`事件同样用于监听选择的变化。例如： ```html <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择:{{time}} </view> </picker> ``` 在JS中，`bindTimeChange`函数更新`time`变量，显示用户选定的小时和分钟。 3. 日期选择器 (mode="date")： 日期选择器让用户选取特定日期。设置`mode`为"date"，`value`属性为当前选中的日期，`start`和`end`定义可选日期范围。例如： ```html <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择:{{date}} </view> </picker> ``` `bindDateChange`事件处理函数将更新`date`变量，显示用户选择的日期。 此外，资源中还提到了CSS样式文件（picker.wxss），用于定义picker组件及周围元素的样式，如页面背景色、各部分的内边距等，以提供良好的视觉体验。 总结起来，微信小程序中的picker组件是实现用户交互的重要工具，提供了自定义、时间选择和日期选择等多种功能，通过绑定事件和设置属性，开发者可以灵活地控制选择器的行为和展示效果。