在uniapp中如何自定義picker日期選擇器的年份范圍？

uniapp Picker日期選擇器年份范圍自定義詳解

Uniapp的picker組件在日期選擇方面功能強(qiáng)大，但默認(rèn)年份范圍有時難以滿足特定需求。例如，僅需顯示特定年份范圍，而并非全部年份。雖然start和end參數(shù)可以限制選擇，但被禁用的年份仍然顯示，影響用戶體驗。

本文介紹如何利用uview-ui庫中的datetimepicker組件完美解決此問題。該組件允許通過mindate和maxdate參數(shù)精確控制可顯示和選擇的年份范圍。

步驟：

1. 安裝uview-ui: 在你的Uniapp項目中安裝uview-ui庫，具體方法請參考uview-ui官方文檔。

2. 引入datetimepicker組件: 在需要使用日期選擇器的頁面中引入datetimepicker組件。

3. 設(shè)置mindate和maxdate: 使用mindate和maxdate屬性設(shè)置允許選擇的最小和最大年份。 mindate和maxdate的值應(yīng)為時間戳（毫秒）。

   例如，要限制用戶只能選擇2020年到2025年：

   <u-datetime-picker v-model="selectedYear" :maxdate="maxDate" :mindate="minDate" mode="year"></u-datetime-picker>  data() {   return {     selectedYear: null, // 初始化選擇的年份     minDate: new Date(2020, 0, 1).getTime(),     maxDate: new Date(2025, 11, 31).getTime(),   } }

   代碼中，mode=”year”指定只選擇年份。selectedYear用于存儲用戶選擇的年份。

通過以上步驟，datetimepicker組件將只顯示2020年到2025年，其他年份將被完全隱藏，提供更簡潔、用戶友好的選擇體驗。 這有效解決了Uniapp原生picker組件在自定義年份范圍方面的不足。