vue element-ui （DatePicker)日期选择器获取开始时间和结束时间以及显示默认时间

1.DatePicker 日期选择器获取开始时间和结束时间

页面效果：

<el-date-picker v-model="valuedate" type="monthrange" align="right" 
     unlink-panels range-separator="至"
      start-placeholder="开始月份" end-placeholder="结束月份" 
      :picker-options="pickerOptions" format="yyyy 年 MM 月"
      value-format="yyyy-MM">
</el-date-picker>
<el-button type="primary" @click="onSubmit">查询</el-button>

 export default {
    data() {
      return {
        valuedate:'',
         pickdata: {//向后台传入的参数
                    startTime: '',
                    endTime: '',
                },
      };
    },
    methods: {
      onSubmit() {
        console.log(this.valuedate)
        if (this.valuedate.length == '0') {
                    this.$alert('请输入要查询的月份！', '提示', {
                        confirmButtonText: '确定',
                        type: 'waring',
                    });
                } else {
                    this.pickdata.startTime = this.valuedate[0]
                    this.pickdata.endTime = this.valuedate[1]
                    console.log(this.pickdata.startTime)
                    console.log(this.pickdata.startTime)
                }
     }
    },
  }

• html 部分代码中的format 可以指定输入框的格式；使用value-format可以指定绑定值的格式。

• 在官网上写到，在默认情况下，组件接受并返回的是Date对象，也就是 2020-10-06T16:00:00.000Z 这种格式的，但是我们作为参数要传入后台应该是经过格式化类型的，所以要使用 value-format
  

所以代码中的format="yyyy 年 MM 月" value-format="yyyy-MM"

最后出来的输入框的效果就是 yyyy 年 MM 月，如下图；而 value-format="yyyy-MM" 也使绑定的值 格式变为 2020-04 这种格式，就可以作为参数传入后台了

如下图

经过上面的代码，我们已经拿到了开始时间和结束时间，所以可以做为参数传给后台进行网络请求了。