vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。
推荐指数:
今天就来说一下,怎么使用TDatePicker 日期选择器。废话不多说,首先看一下官方文档吧,看看官方文档是怎么给到的例子吧:
获取系统默认当前去年月日
<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>