代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2开发:element-ui日期组件不可以选择未来时间</title>
<!--引入 element-ui 的样式,-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-date-picker v-model="billProcessDate" type="date" placeholder="请选择购买日期" size="large" value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
billProcessDate: null,
// 不可选择未来时间
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now(); // 禁用大于今天的日期
},
},
}
},
created() {
},
methods: {
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。