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

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

【vue】【date-picker】时间范围模板 获取开始时间和结束时间_第1张图片
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 表示结束时间

你可能感兴趣的:(前端,vue,javascript)