vue的 DatePicker 日期选择器，把选择的日期转化成需要格式传值

缺乏、安全感 2023-01-21 04:29 258阅读 0赞

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:62.1k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]  
官方文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

![b6345aacebb7bafb30ea20bb68ccd962.png][]

今天就来说一下，怎么使用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指定绑定值的格式。

![bfa05acd2f4a91f49814b94150761864.png][]

上面的例子里面是使用默认 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"
          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的格式，传给后端。

![45efa66aaed98ff162f6a91ffe8954c8.png][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[b6345aacebb7bafb30ea20bb68ccd962.png]: /images/20221020/77e969fedf654f2c89f0e59d502f5531.png
[bfa05acd2f4a91f49814b94150761864.png]: /images/20221020/16ad2133b6bd4355b5bb091bfe333488.png
[45efa66aaed98ff162f6a91ffe8954c8.png]: https://img-blog.csdnimg.cn/img_convert/45efa66aaed98ff162f6a91ffe8954c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210514152551151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70