使用原生小程序组件Picker自定义日期时间选择器

微信小程序自定义日期时间Picker组件详解

最新推荐文章于 2025-10-02 13:38:01 发布

原创

最新推荐文章于 2025-10-02 13:38:01 发布 · 1.5w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细介绍了微信小程序中Picker组件的使用，包括其不同模式（如selector、multiSelector、time、date和region）以及如何自定义日期选择器，通过示例代码展示了如何设置和处理用户选择的日期时间。

该文章已生成可运行项目，

使用原生小程序组件Picker自定义日期时间选择器

1、 Picker简单介绍

可以看到Picker类型有5种，具体可以查看微信开放文档 picker。

Picker（选择器）是一种常见的用户界面控件，用于从多个选项中选择一个或多个选项。在小程序中，Picker 是一种可用于选择日期、时间、地点等信息的组件。

小程序中的 Picker 组件提供了几种不同的模式，包括 mode="selector"、mode="multiSelector"、mode="time"、mode="date"、mode="region"等。具体的功能和用法如下：

mode="selector"（单列选择器）：该模式下，可以通过设置 range 属性指定一个数组作为选择器的选项列表，用户可以从中选择一个选项。
mode="multiSelector"（多列选择器）：该模式下，可以通过设置 range 属性指定一个二维数组作为选择器的选项列表，其中每个子数组代表一个列，用户可以在每列中选择一个选项。可以通过 rangeKey 属性为每个选项指定一个关键字，用于显示在选择器中。
mode="time"（时间选择器）：该模式下，用于选择时间，包括小时和分钟。可以通过设置 start 和 end 属性指定时间的可选范围。
mode="date"（日期选择器）：该模式下，用于选择日期，包括年、月、日。可以通过设置 start 和 end 属性指定日期的可选范围。
mode="region"（省市区选择器）：该模式下，用于选择省市区。

使用 Picker 组件，需要在小程序页面的 WXML 文件中添加相应的标签，并在相应的 JavaScript 文件中编写事件处理函数来处理用户的选择。

以下是一个示例代码，展示了如何使用 Picker 组件进行日期选择：

<view>
  <picker mode="date" bindchange="handleDateChange">
    <text>选择日期</text>
  </picker>
  <text>选择的日期：{
  
  {selectedDate}}</text>
</view>

Page({
   
   
  data: {
   
   
    selectedDate: ''
  },
  handleDateChange: function (event) {
   
   
    const selectedDate = event.detail.value;
    this.setData({
   
   
      selectedDate:</