HTML_element 、 vant 时间区间设置,日期选择限制
在使用Vant Weapp中的DatePicker
组件时,可以通过设置min-date
和max-date
属性来限制用户可以选择的日期范围。以下是一个简单的例子,展示如何使用这两个属性来设置日期选择的限制:
<van-cell-group>
<van-field
label="出发日期"
bind:click="onFieldClick"
value="{{ selectedDate }}"
readonly
/>
</van-cell-group>
<van-popup
show="{{ isDatePickerShow }}"
position="bottom"
bind:close="onPopupClose"
>
<van-date-picker
type="date"
min-date="{{ minDate }}"
max-date="{{ maxDate }}"
value="{{ currentDate }}"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
</van-popup>
Page({
data: {
selectedDate: '',
isDatePickerShow: false,
currentDate: new Date().getTime(),
minDate: new Date().getTime() - 24 * 60 * 60 * 1000 * 15, // 最小日期限制为15天前
maxDate: new Date().getTime() + 24 * 60 * 60 * 1000 * 15, // 最大日期限制为15天后
},
onFieldClick() {
this.setData({
isDatePickerShow: true
});
},
onConfirm(event) {
const date = new Date(event.detail);
this.setData({
selectedDate: date.toDateString(),
currentDate: event.detail,
isDatePickerShow: false
});
},
onCancel() {
this.setData({
isDatePickerShow: false
});
},
onPopupClose() {
this.setData({
isDatePickerShow: false
});
}
});
在这个例子中,我们设置了最小日期为15天前,最大日期为15天后。用户只能在这个范围内选择日期。当用户点击字段时,会弹出日期选择器,并且根据选择结果更新字段的值。
评论已关闭