TimePicker 컴포넌트

시간을 선택하는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요?

시간을 입력해야 할 때 표준 입력창을 클릭하면 패널이 떠서 선택할 수 있어요.

기본 사용법

:::demo

<template>
  <div class="mb-2">
    <div class="mb-0">basic</div>
    <d-time-picker v-model="time01" placeholder="请选择时间" />
  </div>
  <div class="mb-2">
    <div class="mb-0">default open</div>
    <d-time-picker v-model="vModelValue" :time-picker-width="300" :autoOpen="true" />
  </div>
  <div class="mb-2">
    <div class="mb-0">disabled</div>
    <d-time-picker v-model="vModelValue" disabled />
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let vModelValue = ref('12:30:40');
    let time01 = ref('');
    return {
      vModelValue,
      time01,
    };
  },
});
</script>

:::

시간 구간 제한

:::demo

<template>
  <div class="mb-2">
    <div class="mb-0">minTime</div>
    <d-time-picker min-time="01:04:30" />
  </div>
  <div class="mb-2">
    <div class="mb-0">maxTime</div>
    <d-time-picker max-time="22:30:30" v-model="vModelValues" />
  </div>
  <div class="mb-2">
    <div class="mb-0">maxTime && minTime</div>
    <d-time-picker min-time="02:04:40" max-time="22:30:30" />
  </div>
</template>

<script>
import { ref, defineComponent, watch } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let vModelValues = ref('23:30:20');

    return {
      vModelValues,
    };
  },
});
</script>

:::

포맷

:::demo

<template>
  <div class="mb-2">
    <div class="mb-0">hh:mm:ss</div>
    <d-time-picker min-time="01:04:30" />
  </div>
  <div class="mb-2">
    <div class="mb-0">mm:HH:ss</div>
    <d-time-picker class="mb-0" format="mm:HH:ss" v-model="vModelValueFirst" />
    当前选中时间：<button>{{ vModelValueFirst }}</button>
  </div>
  <div class="mb-2">
    <div class="mb-0">hh:mm</div>
    <d-time-picker class="mb-0" format="hh:mm" v-model="hhmm" />
    当前选中时间：<button>{{ hhmm }}</button>
  </div>
  <div class="mb-2">
    <div class="mb-0">MM:ss</div>
    <d-time-picker class="mb-0" format="MM:ss" v-model="mmss" />
    当前选中时间：<button>{{ mmss }}</button>
  </div>
</template>
<script>
import { ref, defineComponent, watch } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let vModelValueFirst = ref('23:10:20');
    let hhmm = ref('11:12:34');
    let mmss = ref('23:10:20');

    watch(vModelValueFirst, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });

    return {
      vModelValueFirst,
      mmss,
      hhmm,
    };
  },
});
</script>

:::

템플릿 전달

:::demo

<template>
  <div>
    <div class="mb-0">自定义 customViewTemplate</div>
    <d-time-picker ref="slotDemo">
      <template v-slot:customViewTemplate>
        <div class="slot-box">
          <div class="slot-bottom" @click="chooseNowFun">choose now</div>
          <div class="slot-bottom" @click="chooseTime">choose 23:00</div>
        </div>
      </template>
    </d-time-picker>
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';

export default defineComponent({
  setup(props, ctx) {
    let slotDemo = ref(null);

    const chooseTime = () => {
      let timeObj = {
        time: '23',
        type: 'mm',
      };
      slotDemo.value.chooseTime(timeObj);
    };

    // 插槽内方法  --  选择当前时间
    const chooseNowFun = () => {
      let date = new Date();
      let hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
      let minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
      let second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
      let timeObj = {
        time: hour + ':' + minute + ':' + second,
      };
      slotDemo.value.chooseTime(timeObj);
    };

    return {
      chooseNowFun,
      chooseTime,
      slotDemo,
    };
  },
});
</script>

<style>
.slot-box {
  overflow: hidden;
  height: 100%;
}
.slot-bottom {
  font-size: 14px;
  cursor: pointer;
}
.slot-bottom:hover {
  color: #7693f5;
  text-decoration: underline;
}
</style>

:::

데이터 가져오기 방식

:::demo

<template>
  <div class="mb-2">
    <div class="mb-0">selectedTimeChange</div>
    <d-time-picker class="mb-0" @change="selectedTimeChange" />
    当前选中时间：<button @click="getNewTimeFun">{{ time1 }}</button>
  </div>
  <div class="mb-2">
    <div class="mb-0">v-model</div>
    <d-time-picker class="mb-0" v-model="time2" />
    当前选中时间：<button @click="getNewTimeFun">{{ time2 }}</button>
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';

export default defineComponent({
  setup(props, ctx) {
    let time1 = ref('00:00:00');
    let time2 = ref('00:00:00');

    // 返回选中的时间
    const selectedTimeChange = (timeValue) => {
      time1.value = timeValue;
    };

    return {
      selectedTimeChange,
      time1,
      time2,
    };
  },
});
</script>

:::

TimePicker 파라미터

TimePicker 이벤트

더 알아보기 (Learn more)

TimePicker로 패널에서 시간을 선택할 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.