Timepicker

选择或者输入时间

基本用法

<c-timepicker
  v-model="time"
  :minTime="minTime"
  @change="timeChange"
></c-timepicker>

<script>
  export default {
    data () {
      return {
        minTime: '20:40:03',
        time: '10:12:45',
      }
    },
    methods: {
      timeChange (time) {
        console.log('time changed')
      }
    }
  }
</script>

设置禁用

<c-timepicker
  v-model="time"
  :readonly="readonly"
  :defaultValue="defaultTime"
  @change="timeChange"
></c-timepicker>
<c-timepicker
  v-model="time"
  :disabled="disabled"
  :defaultValue="defaultTime"
  @change="timeChange"
></c-timepicker>
<script>
  export default {
    data () {
      return {
        readonly: true,
        disabled: true,
        time: '10:12:45',
        defaultTime: '12:23:45'
      }
    },
    methods: {
      timeChange (time) {
        console.log('time changed')
      }
    }
  }
</script>

设置大小

<c-timepicker
  v-model="time"
  :size="small"
  @change="timeChange"
></c-timepicker>
<c-timepicker
  v-model="time"
  @change="timeChange"
></c-timepicker>
<c-timepicker
  v-model="time"
  :size="big"
  @change="timeChange"
></c-timepicker>
<script>
  export default {
    data () {
      return {
        time: '',
        small: 'sm',
        big: 'lg'
      }
    },
    methods: {
      timeChange (time) {
        console.log('time changed')
      }
    }
  }
</script>

设置步长用法

<c-timepicker
  v-model="time"
  :defaultValue="defaultTime"
  :secondStep="secondStep"
  :minuteStep="minuteStep"
  :hourStep="hourStep"
  @change="timeChange"
></c-timepicker>

<script>
  export default {
    data () {
      return {
        hourStep: 2,
        minuteStep: 10,
        secondStep: 5,
        time: ''
      }
    },
    methods: {
      timeChange (time) {
        console.log('second time changed')
      }
    }
  }
</script>

选择时分

<c-timepicker
  v-model="time"
  :format="format"
></c-timepicker>

<script>
  export default {
    data () {
      return {
        time: '',
        format: 'HH:mm'
      }
    }
  }
</script>

时间范围

至

开始时间

结束时间

<c-timepicker
  v-model="time"
  :timeType="type"
  :readonly="readonly"
  :disabled="disabled"
  :format="format"
  @change="timeChange"
></c-timepicker>

<script>
  export default {
    data () {
      return {
        small: 'sm',
        big: 'lg',
        type: 'timerange',
        readonly: false,
        disabled: false,
        time: ['10:13:23', '12:32:56'],
      }
    },
    methods: {
      timeChange (time) {
        console.log('time changed')
      }
    }
  }
</script>

API

属性

属性	类型	默认值	说明
timeType	String	timepicker	时间选择timepicker，时间范围timerange
placeholder	String	请输入时间	时间选择默认提示
disabled	Boolean	false	时间框是否被禁用
readonly	Boolean	false	是否可以输入日期
minTime	String		设置最小时间
maxTime	String		设置最大时间
size	String		尺寸大小，可以设置为sm, lg
defaultValue	String		默认显示的时间，针对时间选择设置
hourStep	Number	1	小时的间隔步长
minuteStep	Number	1	分钟的间隔步长
secondStep	Number	1	秒的间隔步长