【vue】【date-picker】时间范围模板 获取开始时间和结束时间

使用elementUI的日期选择器，有一个选择日期范围的模板。也就是使用一个选择器但是包括了开始时间和结束时间，那么如何获取到开始时间和结束时间？

elementUI组件库连接–需要自取

1、首先，在el-date中，需要注意v-model设置，themetime是自定义的名字，随便写一个就行

<el-date-picker
            v-model="ruleForm.themetime" 
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="float: left"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>

• 上面第二行一定注意ruleForm.前缀，因为后面使用的时候跟其他的表单内的组件一样，都是用这个做前缀，所以不能漏掉（当然，如果你没有使用表单，直接放到vue中的，可以不用这个前缀）
• 另外需要注意，最后两行是格式化的功能：format是在前端页面中的显示格式，value-format是传参到后端的时候的样子，这两个可以一样，也可以设置成不一样的，都可以

2、其次，需要在data的return中写v-model的值。相当于定义变量

data () {
    return {
    // 我这里使用的是表单ruleForm，将选择器放在表单里了，所以这里多了ruleForm，
    // 如果不使用表单，直接在return中写themetime: [] 
    // 需要注意，是数组，不能写成 ''
      ruleForm: {
        themetime: []
      },
      // 向后台传入的时间参数，将前台的date分离成开始时间和结束时间。
      //这里这个time可以定义，也可以不定义。
      // 定义的好处是下面多次使用的时候直接取用time就行，
      // 不定义的话每次取用this.ruleForm.themetime[] 也行
      time: {
        starttime: '',
        endtime: ''
      }
    }
  },

3、在methods中使用的时候，应该用数组themetime[]，下标0 表示开始时间，下标1 表示结束时间