官方picker可以設置有效時間，有效時間外的禁止選擇，但是無法隱藏，于是決定通過picker-view和picker-view-column來手寫一個，效果如圖：

需要注意的一些地方：

2月份，需要判斷是平/閏年；

大小月，30或31天；

還有就是選擇本年，控制顯示月份，選擇本月控制顯示日。

組件 wxml

<slot bindtap="handlePicker"></slot><view hidden="{{!visible}}" class="date-picker-cover" bindtap="tapCancel"></view> <view class="date-picker" animation="{{animationData}}"><view class="btn-area"><view class="btn-cancel" bindtap="tapCancel">取消</view><view class="btn-confirm" bindtap="tapConfirm">確定</view></view><picker-view class="picker-view" value="{{value}}" bindchange="changeDate"><picker-view-column><view wx:for="{{years}}" wx:key="index" class="picker-view-column">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{showDate.months}}" wx:key="index" class="picker-view-column">{{item > 9 ? item : '0' + item}}月</view></picker-view-column><picker-view-column><view wx:for="{{showDate.days}}" wx:key="index" class="picker-view-column">{{item > 9 ? item : '0' + item}}日</view></picker-view-column></picker-view></view>

組件 js

Component({/*** 組件的屬性列表*/properties: {// 日期 格式 yyyy-MM-DDdateValue: {type: String,observer: function (val) {if (val) {this.initDate(val)}}}},/*** 組件的初始數據*/data: {visible: false,years: [],curDate: {year: null,month: null,day: null},// 全部月、日fullDate: {months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]},// 顯示月、日showDate: {months: [],days: []},value: null,dateArr: null,formatDate: '',animate: null,animationData: null},pageLifetimes: {show() {let animate = wx.createAnimation({duration: 400,timingFunction: 'ease',})this.setData({animate})}},/*** 組件的方法列表*/methods: {// 選擇日期handlePicker() {const slideUp = this.data.animate.bottom(0).step()this.setData({animationData: slideUp.export(),// 彈出日期時，顯示確定的時間value: this.data.value,visible: true})},// 初始化日期initDate(val) {const date = new Date()const curDate = {year: date.getFullYear(),month: date.getMonth() + 1,day: date.getDate()}let years = []for (let i = 1; i <= curDate.year; i++) {years.push(i)}const value = val.split('-')this.setData({years,curDate,value: value.map(item => Number(item) - 1)})this.computedDate(value)},// 選擇日期changeDate(val) {let value = val.detail.value.map(item => item + 1)this.computedDate(value)const month = value[1] > 9 ? value[1] : '0' + value[1]const day = value[2] > 9 ? value[2] : '0' + value[2]this.setData({dateArr: val.detail.value,formatDate: `${value[0]}-${month}-${day}`,})},// 計算月、日computedDate (val) {const { months: fullMonths, days: fullDays } = this.data.fullDateconst year = Number(val[0])const month = Number(val[1])// 閏年：能被 4 整除并且不能被 100 整除，或者被 400 整除const leapYear = !(year % 4) && (year % 100) || !(year % 400) ? true : false// 默認大月 0：2月 1：小月let monthType = nullif (month === 2) {monthType = 0} else if ([4, 6, 9, 11].includes(month)) {monthType = 1}// 本年顯示 ≤ 本月let months = year === this.data.curDate.year ? fullMonths.slice(0, this.data.curDate.month) : fullMonthslet days = fullDaysif (year === this.data.curDate.year && month === this.data.curDate.month) {// 本年且本月，顯示 ≤ 本日days = fullDays.slice(0, this.data.curDate.day)} else {if (monthType === 0) {// 2月days = leapYear ? fullDays.slice(0, 29) : fullDays.slice(0, 28)} else if (monthType === 1) {// 小月days = fullDays.slice(0, 30)}}this.setData({['showDate.months']: months,['showDate.days']: days})},// 確定tapConfirm() {const slideDown = this.data.animate.bottom('-560rpx').step()this.triggerEvent('change', this.data.formatDate)this.setData({value: this.data.dateArr,animationData: slideDown.export(),visible: false})},// 取消tapCancel() {const slideDown = this.data.animate.bottom('-560rpx').step()this.setData({animationData: slideDown.export(),visible: false})}} })

組件 wxss

.date-picker-cover {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;z-index: 99; } .date-picker {width: 100%;position: absolute;left: 0;bottom: 0;background-color: #fff;position: fixed;bottom: -560rpx;left: 0;z-index: 100; } .date-picker .btn-area {box-sizing: border-box;width: 100%;display: flex;justify-content: space-between;padding: 18rpx 30rpx;border-bottom: 2rpx solid #f6f6f6;font-size: 32rpx; } .date-picker .btn-area .btn-cancel {color: #7f7f7f; } .date-picker .btn-area .btn-confirm {color: #07c160; } .date-picker .picker-view {width: 100%;height: 480rpx; } .date-picker .picker-view .picker-view-column {line-height: 34px;text-align: center;font-size: 32rpx; }

調用組件

<!-- wxml --> <view><date-picker dateValue="{{date}}" bindchange="changeDate"><view class="date-content">選擇日期：{{date}}</view></date-picker> </view> // js Page({data: {date: '2021-12-02'},onLoad() {},changeDate(val) {this.setData({date: val.detail})} }) // json {"usingComponents": {"date-picker": "/components/date-picker/date-picker"} }

總結

以上是生活随笔為你收集整理的小程序自定义日期组件，不显示今日之后的日期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。