vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
推荐指数： Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard 官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/
今天就来说一下，怎么使用TDatePicker 日期选择器。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：
DatePicker 日期选择器 https://element.eleme.cn/#/zh-CN/component/date-picker
获取系统默认当前去年月日
代码语言：javascript复制<template>
<div class="filter-container" style="margin-bottom: 20px">
<el-date-picker
v-model="value1"
type="date"
placeholder="选择开始日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
<el-date-picker
v-model="value2"
type="date"
placeholder="选择结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</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: "",
};
},
created() {
this.Date();
},
methods: {
//获取当前年月日
Date() {
const nowDate = new Date();
const date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() 1,
date: nowDate.getDate(),
};
const newmonth = date.month > 10 ? date.month : "0" date.month;
const newday = date.date > 10 ? date.date : "0" date.date;
this.value1 = date.year "-" newmonth "-" newday;
this.value2 = date.year "-" newmonth "-" newday;
},
},
};
</script>
<style scoped>
.tab-container {
margin: 30px;
}
</style>
