DatePickerPro 날짜 선택기

날짜를 입력하거나 선택할 때 쓰는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 날짜를 입력해야 할 때, 표준 입력창을 클릭해서 날짜 패널을 띄우고 고르고 싶을 때 사용해요.

기본 사용법

:::demo

<template>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">Small</div>
    <d-date-picker-pro v-model="datePickerProValue" class="mb20 wh250" size="sm" />
  </div>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">Middle</div>
    <d-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" />
  </div>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">Large</div>
    <d-date-picker-pro v-model="datePickerProValue3" class="mb20 wh250" size="lg" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue = ref<string>('');
    const datePickerProValue2 = ref<string>('');
    const datePickerProValue3 = ref<string>('');

    return {
      datePickerProValue,
      datePickerProValue2,
      datePickerProValue3,
    };
  },
});
</script>

<style>
.mb20 {
  margin-bottom: 20px;
}

.wh250 {
  width: 250px;
}
</style>

:::

시간 표시하기

:::demo

<template>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250" :showTime="true" format="YYYY/MM/DD HH:mm:ss" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string>('');

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

:::

캘린더 패널 영역 직접 만들기

:::demo

<template>
  <div class="mb10">right area</div>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250" :showTime="true">
    <template #rightArea>
      <slot name="rightArea">
        <ul class="date-picker-right-panel">
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-30);
                }
              "
            >
              一个月前
            </d-button>
            <span>{{ getDateString(-30) }}</span>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-14);
                }
              "
            >
              两周前
            </d-button>
            <span>{{ getDateString(-14) }}</span>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-7);
                }
              "
            >
              一周前
            </d-button>
            <span>{{ getDateString(-7) }}</span>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(0);
                }
              "
            >
              今天
            </d-button>
            <span>{{ getDateString(0) }}</span>
          </li>
        </ul>
      </slot>
    </template>
  </d-date-picker-pro>
  <div class="mb10">footer</div>
  <d-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" :showTime="true">
    <template #footer>
      <slot name="footer">
        <div class="date-picker-footer">
          <d-button variant="solid" color="secondary" @click="setToday"> 今天 </d-button>
          <d-button variant="solid" color="secondary" @click="clearDate"> 清除时间 </d-button>
        </div>
      </slot>
    </template>
  </d-date-picker-pro>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string | Date>('');
    const datePickerProValue2 = ref<string | Date>('');
    const setDate = (days: number) => {
      datePickerProValue1.value = new Date(new Date().getTime() + days * 24 * 3600 * 1000);
    };
    const getDateString = (days: number) => {
      const date = new Date(new Date().getTime() + days * 24 * 3600 * 1000);
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    };
    const setToday = () => {
      datePickerProValue2.value = new Date(new Date().getTime());
    };
    const clearDate = () => {
      datePickerProValue2.value = '';
    };

    return {
      datePickerProValue1,
      datePickerProValue2,
      setDate,
      getDateString,
      setToday,
      clearDate,
    };
  },
});
</script>
<style>
.date-picker-right-panel {
  padding: 0;
  li {
    list-style-type: none;
    button {
      width: 66px;
    }
    span {
      margin-left: 8px;
    }
  }
}
.date-picker-footer {
  display: flex;
  justify-content: end;
  button {
    margin-left: 10px;
  }
}
</style>

:::

날짜 형식

format으로 입력창에 표시되는 날짜 형식을 지정해요. 자세한 내용은 Format을 참고하세요.

예를 들어: YYYY-MM-DD

:::demo

<template>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">日期格式： YYYY-MM-DD</div>
    <d-date-picker-pro v-model="pickerProFormatValue" class="mb20 wh250" format="YYYY-MM-DD" />
  </div>
  <div class="picker-pro-format-demo">
    <div class="mb10">日期格式： YYYY-MM-DD HH:mm:ss</div>
    <d-date-picker-pro v-model="pickerProFormatValue1" class="mb20 wh250" :showTime="true" format="YYYY-MM-DD HH:mm:ss" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const pickerProFormatValue = ref<string>('');
    const pickerProFormatValue1 = ref<string>('');

    return {
      pickerProFormatValue,
      pickerProFormatValue1,
    };
  },
});
</script>
<style>
.picker-pro-format-demo {
  display: inline-block;
}
.mr30 {
  margin-right: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
</style>

:::

연·월 선택기

type으로 선택기 타입을 지정해요.

:::demo

<template>
  <div class="picker-pro-format-demo mr30">
    <div class="mb10">year picker</div>
    <d-date-picker-pro v-model="pickerProFormatValue" class="mb20 wh250" type="year" />
    <div class="mb10">month picker</div>
    <d-date-picker-pro v-model="pickerProFormatValue1" class="mb20 wh250" type="month" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const pickerProFormatValue = ref<string>('');
    const pickerProFormatValue1 = ref<string>('');
    return {
      pickerProFormatValue,
      pickerProFormatValue1,
    };
  },
});
</script>

:::

범위 선택기

:::demo

<template>
  <div class="mb10">basic range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue" class="mb20" />
  <div class="mb10">time range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue1" class="mb20" :showTime="true" format="YYYY/MM/DD HH:mm:ss" />
  <div class="mb10">year range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue2" class="mb20 wh250" type="year" />
  <div class="mb10">month range picker</div>
  <d-range-date-picker-pro v-model="rangeDatePickerProValue3" class="mb20 wh250" type="month" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const rangeDatePickerProValue = ref<string[]>(['', '']);
    const rangeDatePickerProValue1 = ref<string[]>(['', '']);
    const rangeDatePickerProValue2 = ref<string[]>(['', '']);
    const rangeDatePickerProValue3 = ref<string[]>(['', '']);

    return {
      rangeDatePickerProValue,
      rangeDatePickerProValue1,
      rangeDatePickerProValue2,
      rangeDatePickerProValue3,
    };
  },
});
</script>

:::

날짜 범위 패널 영역 직접 만들기

:::demo

<template>
  <div class="mb10">right area</div>
  <d-range-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250" :showTime="true">
    <template #rightArea>
      <slot name="rightArea">
        <ul class="date-picker-right-panel">
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-30);
                }
              "
            >
              一个月前
            </d-button>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  setDate(-14);
                }
              "
            >
              一周前
            </d-button>
          </li>
          <li>
            <d-button
              variant="text"
              color="primary"
              @click="
                () => {
                  selectThisWeek();
                }
              "
            >
              当前周
            </d-button>
          </li>
        </ul>
      </slot>
    </template>
  </d-range-date-picker-pro>
  <div class="mb10">footer</div>
  <d-range-date-picker-pro ref="footerCustom" v-model="datePickerProValue2" class="mb20 wh250" :showTime="true">
    <template #footer>
      <slot name="footer">
        <div class="date-picker-footer">
          <d-button variant="solid" color="secondary" @click="clearStartDate"> 清除开始时间 </d-button>
          <d-button variant="solid" color="secondary" @click="clearEndDate"> 清除结束时间 </d-button>
        </div>
      </slot>
    </template>
  </d-range-date-picker-pro>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string | Date[]>(['', '']);
    const datePickerProValue2 = ref<string | Date[]>(['', '']);
    const setDate = (days: number) => {
      datePickerProValue1.value = [new Date(new Date().getTime() + days * 24 * 3600 * 1000), new Date()];
    };
    const selectThisWeek = () => {
      const tody = new Date();
      const start = new Date(new Date().setDate(tody.getDate() - tody.getDay()));
      const end = new Date(new Date().setDate(start.getDate() + 6));
      datePickerProValue1.value = [start, end];
    };

    const footerCustom = ref();

    const clearStartDate = () => {
      const [start, end] = datePickerProValue2.value;
      datePickerProValue2.value = ['', end];
      footerCustom?.value.focusChange('start');
    };
    const clearEndDate = () => {
      const [start, end] = datePickerProValue2.value;
      datePickerProValue2.value = [start, ''];
      footerCustom?.value.focusChange('end');
    };

    return {
      datePickerProValue1,
      datePickerProValue2,
      setDate,
      selectThisWeek,
      footerCustom,
      clearStartDate,
      clearEndDate,
    };
  },
});
</script>

:::

선택기 비활성화

:::demo

<template>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250 mr30" :disabled="true" />
  <d-range-date-picker-pro v-model="datePickerProValue2" class="mb20 wh250" :disabled="true" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string>('');
    const datePickerProValue2 = ref<string[]>(['', '']);

    return {
      datePickerProValue1,
      datePickerProValue2,
    };
  },
});
</script>

:::

캘린더 패널의 선택 가능 시간 범위 설정

calendarRange 속성을 추가하면 선택기 캘린더 패널에 표시되는 시간 범위를 정할 수 있어요. limitDateRange 속성을 추가하면 선택기 캘린더 패널에서 선택할 수 있는 시간 범위를 정할 수 있어요.

:::demo

<template>
  <d-date-picker-pro v-model="datePickerProValue1" class="mb20 wh250 mr30" :calendarRange="[2022, 2025]" :limitDateRange="limitDateRange" />
  <d-range-date-picker-pro
    v-model="datePickerProValue2"
    class="mb20 wh250"
    :calendarRange="[2022, 2025]"
    :limitDateRange="limitDateRange"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const datePickerProValue1 = ref<string>('');
    const datePickerProValue2 = ref<string[]>(['', '']);
    const limitDateRange = ref<Date[]>([new Date(2022, 1, 5), new Date(2023, 1, 5)]);

    return {
      datePickerProValue1,
      datePickerProValue2,
      limitDateRange,
    };
  },
});
</script>

:::

DatePickerPro 파라미터

파라미터	타입	기본값	설명	Demo 링크
v-model	Date	''	필수, 선택 항목에 바인딩되는 값이에요	기본 사용법
format	Format	'YYYY/MM/DD' | 'YYYY/MM/DD HH:mm:ss'	선택, 바인딩 값의 날짜 형식이에요. showTime 여부에 따라 기본값이 달라져요	날짜 형식
placeholder	string	'날짜를 선택하세요'	선택, 입력창의 placeholder예요	기본 사용법
showTime	boolean	false	선택, 시·분·초를 표시할지 여부예요	시간 표시하기
size	string	'md'	선택, 입력창의 크기예요	기본 사용법
disabled	boolean	false	선택, 선택기를 비활성화할지 여부예요	선택기 비활성화
calendarRange	[number,number]	[1970, 2099]	선택, 캘린더 패널에 표시할 시간 범위를 설정해요	캘린더 패널의 선택 가능 시간 범위 설정
limitDateRange	[Date,Date]	[new Date(calendarRange[0]), new Date(calendarRange[1])]	선택, 캘린더 패널에서 선택 가능한 시간 범위를 설정해요	캘린더 패널의 선택 가능 시간 범위 설정
type	string	'date'	선택, 날짜 선택기 타입을 설정해요 (date/year/month)	연·월 선택기
show-glow-style	boolean	true	선택, 마우스를 올릴 때의 발광 효과를 표시할지 여부예요
position	Placement[]	['bottom-start','top-start']	선택, 드롭다운 패널 위치를 직접 정해요

DatePickerPro 이벤트

이벤트명	타입	설명	Demo 링크
toggleChange	(bool: boolean) => void	선택, 선택기가 열리고 닫히는 toggle 이벤트예요
confirmEvent	(date: Date) => void	선택, 사용자가 선택한 값을 확정할 때 발생해요
focus	(e: MouseEvent) => void	선택, 입력창이 포커스를 얻을 때 발생해요
blur	() => void	선택, 입력창이 포커스를 잃을 때 발생해요

DatePickerPro 슬롯

이름	설명	Demo 링크
rightArea	DatePickerPro 캘린더 패널 오른쪽 내용을 직접 만들어요. 예: 날짜 빠른 선택 옵션	캘린더 패널 영역 직접 만들기
footer	DatePickerPro 캘린더 패널 아래쪽 내용을 직접 만들어요	캘린더 패널 영역 직접 만들기

DatePickerPro 타입 정의

Format

type Format = string;

날짜 형식 format이 지원하는 표식 목록이에요.

표식	예시	설명
YY	22	연, 두 자리
YYYY	2022	연, 네 자리
M	1-12	월, 1부터 시작해요
MM	01-12	월, 두 자리 숫자
MMM	Jan-Dec	월, 영어 약어예요
D	1-31	일이에요
DD	01-31	일, 두 자리
H	0-23	24시간제예요
HH	00-23	24시간제, 두 자리
h	1-12	12시간제예요
hh	01-12	12시간제, 두 자리
m	0-59	분이에요
mm	00-59	분, 두 자리
s	0-59	초예요
ss	00-59	초, 두 자리

RangeDatePickerPro 파라미터

파라미터	타입	기본값	설명	Demo 링크
v-model	[Date, Date]	['','']	필수, 선택 항목에 바인딩되는 값이에요	범위 선택기
format	Format	'YYYY/MM/DD' | 'YYYY/MM/DD HH:mm:ss'	선택, 바인딩 값의 날짜 형식이에요. showTime 여부에 따라 기본값이 달라져요	날짜 형식
placeholder	Array	['시작 날짜를 선택하세요', '종료 날짜를 선택하세요']	선택, 입력창의 placeholder예요	범위 선택기
showTime	boolean	false	선택, 시·분·초를 표시할지 여부예요	범위 선택기
separator	string	'-'	선택, 범위 선택기의 구분자예요	범위 선택기
size	string	'md'	선택, 입력창의 크기예요
disabled	boolean	false	선택, 선택기를 비활성화할지 여부예요	선택기 비활성화
calendarRange	[number,number]	[1970,2099]	선택, 캘린더 패널에 표시할 시간 범위를 설정해요	캘린더 패널의 선택 가능 시간 범위 설정
limitDateRange	[Date,Date]	[new Date(calendarRange[0]), new Date(calendarRange[1])]	선택, 캘린더 패널에서 선택 가능한 시간 범위를 설정해요	캘린더 패널의 선택 가능 시간 범위 설정
type	string	'date'	선택, 날짜 선택기 타입을 설정해요 (date/year/month)	범위 선택기
show-glow-style	boolean	true	선택, 마우스를 올릴 때의 발광 효과를 표시할지 여부예요
position	Placement[]	['bottom-start','top-start']	선택, 드롭다운 패널 위치를 직접 정해요

RangeDatePickerPro 이벤트

이벤트명	타입	설명	Demo 링크
toggleChange	(bool: boolean) => void	선택, 선택기가 열리고 닫히는 toggle 이벤트예요
confirmEvent	(date: Date[]) => void	선택, 사용자가 선택한 시간 범위를 확정할 때 발생해요
focus	(e: MouseEvent) => void	선택, 입력창이 포커스를 얻을 때 발생해요
blur	() => void	선택, 입력창이 포커스를 잃을 때 발생해요

RangeDatePickerPro 슬롯

이름	설명	Demo 링크
rightArea	RangeDatePickerPro 캘린더 패널 오른쪽 내용을 직접 만들어요. 예: 날짜 범위 빠른 선택 옵션	날짜 범위 패널 영역 직접 만들기
footer	RangeDatePickerPro 캘린더 패널 아래쪽 내용을 직접 만들어요	날짜 범위 패널 영역 직접 만들기

타입 정의

Placement

type Placement =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'top-start'
  | 'top-end'
  | 'right-start'
  | 'right-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'left-start'
  | 'left-end';

더 알아보기 (Learn more)

d-date-picker-pro와 d-range-date-picker-pro는 단일 날짜부터 연·월 선택, 범위 선택까지 폭넓게 지원해요. format과 type 속성 조합부터 익혀 두면 실제 프로젝트에서 응용하기 수월할 거예요.