使用原生小程序組件Picker自定義日期時間選擇器

1、 Picker簡單介紹

可以看到Picker類型有5種， 具體可以查看微信開放文檔 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"（省市區(qū)選擇器）：該模式下，用于選擇省市區(qū)。

使用 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 組件，當用戶選擇日期時，會觸發(fā) bindchange 事件，然后在事件處理函數 handleDateChange 中獲取選擇的日期，并將其存儲在頁面的 data 對象中的 selectedDate 屬性中。通過數據綁定，可以在頁面中顯示所選的日期。

通過這種方式，您可以在小程序中使用 Picker 組件來實現各種選擇功能，根據不同的模式和屬性設置，來滿足您的特定需求。

2、日期選擇器

fields 有效值：

3、實戰(zhàn)

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() // 秒

?    // 有其他格式化字符需求可以繼續(xù)添加，必須轉化成字符串

   };

   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發(fā)送選擇改變，攜帶值為', 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 最終效果

文章來源地址http://www.zghlxwxcb.cn/news/detail-703456.html

到了這里，關于使用原生小程序組件Picker自定義日期時間選擇器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！