<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
</head>
<style></style>
<body>
<div id="app">
<el-date-picker
v-model="orderStart"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始日期"
class="form-search-width"
@change="changeStart"
>
</el-date-picker>
开始日期: {{orderStart}}
<el-date-picker
v-model="orderEnd"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
:picker-options="afterwardsDate"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始日期"
class="form-search-width"
>
</el-date-picker>
</div>
</body>
<!-- 先引入 Vue -->
<script src="./vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="./vue/index.js"></script>
<script>
new Vue({
el: "#app",
data: () => {
return {
orderStart: "",
orderEnd: "",
afterwardsDate: {
disabledDate: null,
},
};
},
created() {
},
mounted() {},
methods: {
changeStart(e) {
console.log(e);
if (e) {
this.afterwardsDate.disabledDate = (date) => {
return date.getTime() < new Date(e).getTime() + 24 * 60 * 60 * 1000;
};
}
},
},
});
</script>
</html>
vue开始日期与结束日期分开选择,结束日期禁用开始选中日期
最新推荐文章于 2024-07-05 12:33:04 发布