微信小程序picker禁止选择小于当前的日期

### 实现微信小程序 Picker 组件禁选小于当前日期的方法 为了实现在微信小程序中的 `picker` 组件禁止选择小于当前日期的功能，可以利用 `picker` 的属性 `start` 和 `end` 来设置可选日期范围[^1]。通过动态计算当前日期作为起始值并将其赋给 `start` 属性，即可达到目的。 以下是具体实现方式： #### 方法一：使用原生 `picker` 组件 可以通过在页面数据中绑定 `start` 属性来控制最小可选日期。以下是一个完整的代码示例： ```javascript // index.js Page({ data: { date: '2023-09-01', // 默认显示的日期 start: '', // 起始日期 end: '' // 结束日期 }, onLoad() { const today = this.getToday(); this.setData({ start: today, end: '2050-12-31' // 设置最大年份 }); }, getToday() { const now = new Date(); let year = now.getFullYear(); let month = (now.getMonth() + 1).toString().padStart(2, '0'); let day = now.getDate().toString().padStart(2, '0'); return `${year}-${month}-${day}`; }, bindDateChange(e) { console.log('picked date:', e.detail.value); this.setData({ date: e.detail.value }); } }); ``` ```html <!-- index.wxml --> <picker mode="date" value="{{date}}" start="{{start}}" end="{{end}}" bindchange="bindDateChange"> <view class="picker">当前选择: {{date}}</view> </picker> ``` 上述代码中，`getToday()` 函数用于获取今天的日期，并将该日期设为 `start` 值，从而阻止用户选择早于今天的时间。 --- #### 方法二：基于 Vant 时间选择器组件 如果项目已经集成了 Vant WeApp 库，则可以直接使用其提供的 `van-datetime-picker` 组件，并通过配置参数限制时间范围[^2]。 首先，在 `app.json` 或对应页面的 `json` 文件中注册组件： ```json { "usingComponents": { "van-datetime-picker": "@vant/weapp/datetime-picker/index" } } ``` 接着编写逻辑代码如下所示： ```javascript // index.js Page({ data: { showPicker: false, minDate: '', maxDate: '' }, onLoad() { const todayTimestamp = Date.now(); // 获取当前时间戳 this.setData({ minDate: todayTimestamp, maxDate: new Date(2050, 11, 31).getTime() }); }, onConfirm(event) { const { detail } = event; console.log('selected time:', detail); this.setData({ showPicker: false }); }, onCancel() { this.setData({ showPicker: false }); }, openPicker() { this.setData({ showPicker: true }); } }); ``` ```html <!-- index.wxml --> <view class="example-item"> <button type="primary" size="default" bindtap="openPicker">打开时间选择器</button> <van-datetime-picker v-if="showPicker" visible="{{showPicker}}" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" @cancel="onCancel" /> </view> ``` 此方法借助 Vant 提供的强大功能简化开发流程，同时支持更灵活的时间格式化选项。 --- ### 总结 无论是采用原生 `picker` 还是第三方库（如 Vant），都可以轻松实现对过去日期的选择限制。核心在于合理运用组件自带的约束条件以及动态更新这些条件的数据源。