TimePicker 时间选择器

选择时间

基本用法

默认显示当前时间

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

设置禁用

<se-time-picker disabled></se-time-picker>

自定义默认时间

<se-time-picker v-model="value" format="h:mm:ss a" @change="onChange"></se-time-picker>
<script>
  export default {
    data() {
      return {
        value: '13:01:18'
      }
    },
    methods: {
      onChange(value) {
        console.log(value)
      }
    }
  }
</script>

设置步长

<se-time-picker
  :minute-step="10"
  :second-step="15"
  v-model="value"
  @change="onChange"
></se-time-picker>
<script>
  export default {
    data() {
      return {
        value: '00:00:00'
      }
    },
    methods: {
      onChange(value) {
        console.log(value)
      }
    }
  }
</script>

设置大小

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

选择时分

<se-time-picker format="HH:mm" v-model="value"></se-time-picker>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      onChange(value) {
        console.log(value)
      }
    }
  }
</script>

时间选择默认提示

<se-time-picker placeholder="please select" v-model="value"></se-time-picker>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      onChange(value) {
        console.log(value)
      }
    }
  }
</script>

Props

日期格式

format可选值参考 moment

举例

12 小时制并且没有秒：hh:mm a，h:m A

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

Events