时间选择器

时分秒选择器

::

<template>
  <div class="demo-timePicker-row">
    <t-time-picker v-model="value" @change="timechange" @open="open" @close="close" />
  </div>
</template>

<script>
export default {
  name: 'hms',
  data() {
    return {
      value: '12:20:30',
    };
  },
  methods: {
    timechange(time) {
      console.log(time);
    },
    open() {
      console.log('open');
    },
    close() {
      console.log('close');
    },
  },
};
</script>

显示代码 复制代码 复制代码

时分选择器

请选择时间

<template>
  <div class="demo-timePicker-row">
        <t-time-picker format="HH:mm" />
  </div>
</template>

<script>
export default {
  name: 'hms',
  data() {
    return {
      value: '12:20',
    };
  },
};
</script>

显示代码 复制代码 复制代码

十二小时制选择器

:

<template>
  <div class="demo-timePicker-row">
        <t-time-picker v-model="value" format="A hh:mm" placeholder="选择时间" />
  </div>
</template>

<script>
export default {
  name: 'twelveHours',
  data() {
    return {
      value: 'PM 10:20:30',
    };
  },
};
</script>

显示代码 复制代码 复制代码

时间区间选择器

::-::

<template>
  <div class="demo-timePicker-row">
        <t-time-range-picker class="demos" clearable v-model="time" format="HH:mm:ss" allow-input />
  </div>
</template>

<script>
export default {
  name: 'timeRange',
  data() {
    return {
      time: ['00:00:00', '23:59:59'],
    };
  },
};
</script>

显示代码 复制代码 复制代码