<div id="app">
<date-picker type="date" :options="options4" format="yyyy/MM/dd" placeholder="选择时间" style="width: 200px" v-model="TableInfo.F_FoShiDate" ></date-picker>
</div>
vm = new Vue({
el: '#app',
data() {
return {
options4: {
//设置不可选日期
disabledDate(date) {
//设置七天后之前的时间都不可选
var myDate = new Date();
myDate.setDate(myDate.getDate() + 7);
return date.valueOf() < myDate;
}
},
TableInfo: {
realname: '',
F_Type: '',
F_FoShiDate: '',
F_FoShiDateTemp: '', //用户修改页面 记录原先选中日期
F_Cause: '',
F_MasterCount: 0,
F_Money: 0,
F_ContentType: '',
F_Contacts: '',
F_ZhiFuLuWei: '',
F_Remarks: '',
F_FoShiTime: '',
},
}
}
});

本文介绍了一个使用Vue.js实现的日期选择器组件,该组件通过设置逻辑限制了用户只能选择当前日期及之后七天内的日期。文章详细展示了如何在Vue实例中定义数据属性options4来控制日期选择器的disabledDate方法,从而实现了这一功能。

8992

被折叠的 条评论
为什么被折叠?



