<template>
  <list-layout>
    <div class="components-demo-wrap">
      <date-picker v-model="filters.dateTime" />
    </div>
    <div class="components-demo-wrap">
      <date-range-picker
        v-model="filters.dateRange"
        format="yyyy-MM-dd HH:mm:ss"
        defaultStartTime="00:00:00"
        defaultEndTime="23:59:59"
      />
      {{filters.dateRange}}
    </div>
    <el-button @click="resetTime">重置</el-button>
    <el-button @click="setNullValue">置空</el-button>
    <el-button @click="setNewValue">设置新时间</el-button>

  </list-layout>
</template>

<script>
export default {
  name: 'DatePickerPage',
  data() {
    return {
      filters: {
        dateRange: ['2018-2-13', '2018-2-15'],
      },
    };
  },
  methods: {
    resetTime() {
      console.log('in resetTime');

      this.filters.dateRange = [];
    },
    setNullValue() {
      console.log('in setNullValue');
      this.filters.dateRange = null;
    },
    setNewValue() {
      console.log('in setNewValue');
      this.filters.dateRange = [null, '2019-1-2 00:00:00'];
    },
  },
};
</script>
