vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
今天就来说一下，怎么使用TDatePicker 日期选择器。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：
DatePicker 日期选择器https://element.eleme.cn/#/zh-CN/component/date-picker
<template> <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> </template> <script> //调用接口 import {getQuerycheckList} from "@/api/alarm/query"; 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: "2020-8-1 09:01", value2: "2021-8-1 09:01", }; }, created() { //报警查询表格接口定义 this.getQuerycheckList(); }, methods: { getQuerycheckList() { const params = { startTime: this.value1, stopTime: this.value2, alarmType: 1, organId: 1, isDispose: 1, name: "", page: 1, rows: 5, isPagination: false, }; this.dataLoading = true; getQuerycheckList(params).then((res) => { console.log("报警查询表格接口定义", res); this.pvData = res.data; this.dataLoading = false; }); }, }, }; </script> <style scoped> .tab-container { margin: 30px; } </style>
根据文档，初具效果
但是在实际开发中，需要传的参数的时间格式都是根据需要所定的，一般来说有三种
默认为 Date 对象 值："2021-05-12T16:00:00.000Z"
使用 value-format 值：2021-05-13
时间戳 值：1620835200000
日期格式
使用format指定输入框的格式；使用value-format指定绑定值的格式。
上面的例子里面是使用默认 Date 对象传值，我们这里实际需求中式第二种格式的值：2021-05-13
那就需要用到第二种，使用 value-format
<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>
参考代码
<template> <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> --> <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> <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchContList" >搜索 </el-button> </div> </template> <script> //调用接口 import { getQuerycheckList } from "@/api/alarm/query"; 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.getQuerycheckList(); }, methods: { // 查询按钮 searchContList() { this.getQuerycheckList(); }, getQuerycheckList() { const params = { startTime: this.value1, stopTime: this.value2, alarmType: 1, organId: 1, isDispose: 1, name: "", page: 1, rows: 5, isPagination: false, }; this.dataLoading = true; getQuerycheckList(params).then((res) => { console.log("报警查询表格接口定义", res); this.pvData = res.data; this.dataLoading = false; }); }, }, }; </script> <style scoped> .tab-container { margin: 30px; } </style>
效果
点击搜索按钮的时候，会将选中的日历的日期转化成value-format的格式，传给后端。
