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

向右看齐 2024-03-23 23:29 123阅读 0赞

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

#### 1、 Picker简单介绍 ####

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

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

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

1.  `mode="selector"`（单列选择器）：该模式下，可以通过设置 `range` 属性指定一个数组作为选择器的选项列表，用户可以从中选择一个选项。
2.  `mode="multiSelector"`（多列选择器）：该模式下，可以通过设置 `range` 属性指定一个二维数组作为选择器的选项列表，其中每个子数组代表一个列，用户可以在每列中选择一个选项。可以通过 `rangeKey` 属性为每个选项指定一个关键字，用于显示在选择器中。
3.  `mode="time"`（时间选择器）：该模式下，用于选择时间，包括小时和分钟。可以通过设置 `start` 和 `end` 属性指定时间的可选范围。
4.  `mode="date"`（日期选择器）：该模式下，用于选择日期，包括年、月、日。可以通过设置 `start` 和 `end` 属性指定日期的可选范围。
5.  `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: selectedDate
        });
      }
    });

在示例中，使用了 `mode="date"` 的 Picker 组件，当用户选择日期时，会触发 `bindchange` 事件，然后在事件处理函数 `handleDateChange` 中获取选择的日期，并将其存储在页面的 data 对象中的 `selectedDate` 属性中。通过数据绑定，可以在页面中显示所选的日期。

通过这种方式，您可以在小程序中使用 Picker 组件来实现各种选择功能，根据不同的模式和属性设置，来满足您的特定需求。

#### 2、日期选择器 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">string</td> 
   <td align="left">当天</td> 
   <td align="left">表示选中的日期，格式为"YYYY-MM-DD"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">start</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">end</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">fields</td> 
   <td align="left">string</td> 
   <td align="left">day</td> 
   <td align="left">有效值 year,month,day，表示选择器的粒度</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">value 改变时触发 change 事件，event.detail = {value}</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**fields 有效值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">year</td> 
   <td align="left">选择器粒度为年</td> 
  </tr> 
  <tr> 
   <td align="left">month</td> 
   <td align="left">选择器粒度为月份</td> 
  </tr> 
  <tr> 
   <td align="left">day</td> 
   <td align="left">选择器粒度为天</td> 
  </tr> 
 </tbody> 
</table>

#### 3、实战 ####

##### 3.1 编写日期工具utils.js #####

class Util {
        
    
      static dateFormat(fmt, date) {
        
    
       let ret;
    
       const opt = {
        
    
        "Y+": date.getFullYear().toString(), // 年
    
        "m+": (date.getMonth() + 1).toString(), // 月
    
        "d+": date.getDate().toString(), // 日
    
        "H+": date.getHours().toString(), // 时
    
        "M+": date.getMinutes().toString(), // 分
    
        "S+": date.getSeconds().toString() // 秒
    
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    
       };
    
       for (let k in opt) {
        
    
        ret = new RegExp("(" + k + ")").exec(fmt);
    
        if (ret) {
        
    
         fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
    
        };
    
       };
    
       return fmt;
    
      }
    
     
    
     }
    
     
    
     export {
        
    
      Util
    
     }

##### 3.2 在home.js中引入utils.js #####

import {
        
    
      Util
    
    } from '../../pages/order/utils.js'
    
    // 在Page({ 中添加以下代码 })
    
     data: {
        
            year: Util.dateFormat("YYYY", new Date()),
            month: Util.dateFormat("mm", new Date()),
            date: Util.dateFormat("YYYY", new Date()) + '-' + Util.dateFormat("mm", new Date())
        },
        bindDateChange: function (event) {
        
            console.log('picker发送选择改变，携带值为', event.detail.value)
            const selectedDate = event.detail.value;
            const year = Util.dateFormat("YYYY", new Date(selectedDate));
            const month = Util.dateFormat("mm", new Date(selectedDate));
            this.setData({
        
                date: selectedDate,
                year: year,
                month: month,
            })
        },

##### 3.3 home.wxml代码 #####

<view>
        <view>日期选择器</view>
        <picker mode="date" fields="month" value="YYYY-MM" bindchange="bindDateChange"  end="{
         {year}}+'-'+{
         {month}}" start="{
         {year-5}}">
            <text>{
       {year}}年</text><text>{
       {month}}月</text>
            <view>{
       {date}}</view>
        </picker>
    </view>

##### 3.4 最终效果 #####

![在这里插入图片描述][26117ccabf41473fb1fa61fe9928c160.png]  
![在这里插入图片描述][070efdb2c4b8447f9413b23f5fcc7978.png]

[Link 1]: https://so.csdn.net/so/search?q=%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[picker]: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
[26117ccabf41473fb1fa61fe9928c160.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/c5ece70eff2f476c846cfdfc2c137494.png
[070efdb2c4b8447f9413b23f5fcc7978.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/be63820197fe414f8722f21454afa6ca.png