TimeSelect 시간 선택

여러 개의 고정된 시각 가운데 하나를 골라 주는 시간 선택기예요.

출처: 문서

본문

시간 선택기예요.

언제 사용하나요?

몇 가지 고정된 시각을 사용자에게 제공해 선택하게 할 때 사용해요.

기본 사용법

:::demo

<template>
  <div>
    <div class="mb-0">basic</div>
    <d-time-select class="mb-2" v-model="time00" />

    <div class="mb-0">step</div>
    <d-time-select class="mb-2" v-model="time01" step="00:10" />

    <div class="mb-0">disabled</div>
    <d-time-select class="mb-2" v-model="time02" disabled />
    
    <div class="mb-0">지울 수 없음</div>
    <d-time-select class="mb-2" v-model="time03" :clearable="false" />
  </div>
</template>

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

<style>
.my-10 {
  margin: 10px 0px;
}
</style>

:::

크기

:::demo

<template>
  <div>
    <div class="mb-0">lg</div>
    <d-time-select class="mb-2" v-model="time05" size="lg" placeholder="间隔为1小时" step="01:00" />
    
    <div class="mb-0">md</div>
    <d-time-select class="mb-2" v-model="time05" size="md" placeholder="间隔为30分钟" step="00:30" />
    
    <div class="mb-0">sm</div>
    <d-time-select class="mb-2" v-model="time05" size="sm" placeholder="间隔为1分钟" step="00:01" />
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let time00 = ref('');
    let time01 = ref('');
    let time02 = ref('');
    return {
      time00,
      time01,
      time02,
    };
  },
});
</script>

<style>
.my-10 {
  margin: 10px 0px;
}
</style>

:::

시간 구간

:::demo

<template>
  <div>
    <div class="mb-0">min-time、max-time</div>
    <d-time-select class="mb-2" v-model="time01" min-time="02:20" max-time="18:30" placeholder="控制时间的可选范围" />

    <div class="mb-0">start、end</div>
    <d-time-select class="mb-2" v-model="time02" start="09:00" end="18:30" placeholder="控制时间的显示范围" />

    <div class="mb-0">min-time、max-time、start、end</div>
    <d-time-select class="mb-2" v-model="time03" min-time="09:30" max-time="18:30" start="09:00" end="16:30" />

    <div class="mb-0">고정 시간 범위</div>
    <div>
      <d-row :gutter="5">
        <d-col>
          <d-time-select v-model="startTime" />
        </d-col>
        <d-col>
          <d-time-select v-model="endTime" :min-time="startTime" />
        </d-col>
      </d-row>
  </div>
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let time01 = ref('');
    let time02 = ref('');
    let time03 = ref('09:30');
    let startTime = ref('');
    let endTime = ref('');
    return {
      time01,
      time02,
      time03,
      startTime,
      endTime,
    };
  },
});
</script>

<style>
.my-10 {
  margin: 10px 0px;
}
</style>

:::

이벤트

:::demo

<template>
  <div>
    <div class="mb-0">selectedTimeChange</div>
    <d-time-select v-model="timeData01" @change="selectedTimeChange" @focus="focusFun" @blur="blurFun" />
  </div>
</template>

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

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

    // 선택된 시간을 반환해요
    const selectedTimeChange = (time) => {
      console.log(time);
    };
    const focusFun = (e) => {
      console.log(e);
    };
    const blurFun = (e) => {
      console.log(e);
    };

    return {
      selectedTimeChange,
      timeData01,
      focusFun,
      blurFun,
    };
  },
});
</script>

:::

TimeSelect 파라미터

TimeSelect 이벤트

TimeSelect 타입 정의

ITimeSelect

type ITimeSelect = 'lg' | 'md' | 'sm';

더 알아보기 (Learn more)

d-time-select는 step 간격으로 나열된 고정 시각 목록을 드롭다운으로 보여 줘요. min-time/max-time으로 선택 가능 범위를 제한하거나, 두 개의 선택기를 이어 :min-time="startTime"처럼 묶어 시작-종료 시간 쌍을 만들 수도 있어요.