DatePicker 日期选择器

基本用法

<se-date-picker v-model="value" @change="onChange"></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      onChange(val) {
        console.log(val)
      }
    }
  }
</script>

传字符串

<se-date-picker v-model="value" @change="onChange"></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: '1990-10-10'
      }
    },
    methods: {
      onChange(val) {
        console.log(val)
      }
    }
  }
</script>

传 Date 类型

<se-date-picker v-model="value" @change="onChange"></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: new Date()
      }
    },
    methods: {
      onChange(val) {
        console.log(val)
      }
    }
  }
</script>

传时间戳

<se-date-picker v-model="value" @change="onChange"></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: 1573106865835
      }
    },
    methods: {
      onChange(val) {
        console.log(val)
      }
    }
  }
</script>

禁用模式

<se-date-picker v-model="value" disabled></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

不同尺寸

<div class="date-picker-demo">
  <se-date-picker v-model="value" size="mini"></se-date-picker>
  <se-date-picker v-model="value"></se-date-picker>
  <se-date-picker v-model="value" size="large"></se-date-picker>
</div>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>
<style>
  .date-picker-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 800px;
  }
</style>

选择日期范围

基本用法

<se-date-picker type="date-range" v-model="value" @change="onChange"></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      onChange(val) {
        console.log(val)
      }
    }
  }
</script>

自定义

<se-date-picker
  type="date-range"
  v-model="value"
  @change="onChange"
  format="YY/MM/DD"
></se-date-picker>
<script>
  export default {
    data() {
      return {
        value: ['19/10/10', '19/12/12']
      }
    },
    methods: {
      onChange(val) {
        console.log(val)
      }
    }
  }
</script>

Props

format可选值参考 moment

注：如果要传 value 值，格式必须和你传的 format 格式一致。

Events