vue element ui DatePicker 日期选择器

需求：

把开始和结束时间的样式合并为一个，同时选择开始和结束时间，然后向后台传的数据格式依然是后台要求的分为两个字段，开始与结束。

• 这里是利用计算属性的 get 和 set 来实现的。

效果图：

image.png

代码：

<template>
  <el-form  :model="filters">
     <el-form-item>
       <!-- 下单时间 begin -->
       <el-col :span="8">
           <el-form-item label="下单时间：" label-width="100px">
               <el-date-picker v-model="orderDate" type="daterange" clearable value-format="yyyy-MM-dd"></el-date-picker>
           </el-form-item>
       </el-col>
       <!-- 下单时间 end -->

      <!-- 体检时间 begin -->
      <el-col :span="8">
         <el-form-item label="体检时间：" label-width="100px">
             <el-date-picker v-model="reserveDate" type="daterange" clearable value-format="yyyy-MM-dd"></el-date-picker>
         </el-form-item>
      </el-col>
      <!-- 体检时间 end -->
    </el-form-item>
  </el-form>
</template>

// 这里是ts的语法，js的直接按js的语法来就可以了
<script lang="ts">
  import { Vue, Component } from "vue-property-decorator";
  export default class OrderList extends Vue
{
/**
 * 搜索
 * @protected
 * @returns any
 * @returns any
 */
    protected filters: any =
    {
        StartDate = "";  // 下单开始时间
        EndDate = "";    // 下单结束时间
        Reserve_Start_Date = "";  // 体检开始时间
        Reserve_End_Date = "";  // 体检结束时间
    }

/**
 * 搜索下单时间
 * @protected
 * @returns Array<any>
 */
  protected get orderDate(): Array<any>
  {
      return [this.filters.StartDate, this.filters.EndDate];
  }

/**
 * 搜索下单时间
 * @protected
 * @returns Array<any>
 */
  protected set orderDate(date: Array<any>)
  {
      if(date && date.length > 0 && date[0])
      {
            this.filters.StartDate = dayjs(date[0]).format("YYYY-MM-DD hh:mm:ss");
            this.filters.EndDate = dayjs(date[1]).format("YYYY-MM-DD hh:mm:ss");
       }
       else
       {
             this.filters.StartDate = "";
             this.filters.EndDate = "";
        }
  }

/**
 * 搜索体检时间
 * @protected
 * @returns Array<any>
 */
    protected get reserveDate(): Array<any>
    {
        return [this.filters.Reserve_Start_Date.value, this.filters.Reserve_End_Date.value];
    }

    /**
     * 搜索体检时间
     * @protected
     * @returns Array<any>
     */
    protected set reserveDate(date: Array<any>)
    {
        if(date && date.length > 0 && date[0])
        {
            this.filters.Reserve_Start_Date.value = dayjs(date[0]).format("YYYY-MM-DD hh:mm:ss");
            this.filters.Reserve_End_Date.value = dayjs(date[1]).format("YYYY-MM-DD hh:mm:ss");
        }
        else
        {
            this.filters.Reserve_Start_Date.value = "";
            this.filters.Reserve_End_Date.value = "";
        }
    }
}

向后台传参格式：

向后台传的数据格式依然是后台要求的分为两个字段