vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。
<template> <div class="tab-container"> <div class="filter-container" style="margin-bottom:20px;"> <el-date-picker v-model="value1" type="date" style="width: 150px;" placeholder="选择日期"> </el-date-picker> <el-date-picker v-model="value2" type="date" style="width: 150px;" placeholder="选择日期"> </el-date-picker> </div> </div> </template> <script> export default { data() { return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, shortcuts: [ { text: "今天", onClick(picker) { picker.$emit("pick", new Date()); }, }, { text: "昨天", onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit("pick", date); }, }, { text: "一周前", onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", date); }, }, ], }, //计算日期 value1: "", value2: "", }; }, methods: {}, }; </script> <style scoped> .tab-container { margin: 30px; } </style>