날짜 선택기 (Date/month picker)

v-date-picker는 여러 다른 Vuetify 컴포넌트에서 쓰일 수 있는 독립적 컴포넌트입니다. 이 컴포넌트는 날짜/월을 선택할 수 있는 시각적 표현을 제공합니다.

사용법

Date pickers come in two orientation variations, portrait (default) and landscape. By default they are emitting input event when the day (for date picker) or month (for month picker), but with reactive prop they can update the model even after clicking year/month.

API

v-date-picker
이름
allowed-dates
디폴트
null
타입
function

선택가능한 날짜를 제한

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
day-format
디폴트
null
타입
function

달력 헤더의 일 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
disabled New in — v1.4
디폴트
false
타입
boolean

Components.DatePickers.

이름
event-color
디폴트
warning
타입
array | function | object | string

이벤트를 표시하는 점의 색깔. 값은 문자열(모든 이벤트가 같은 색이 됨)이나 오브젝트 (속성이 이벤트 날짜, 값이 그 날짜의 색깔) 또는 함수(날짜를 인자로 받아서 색깔을 반환)이 가능.

이름
events
디폴트
null
타입
array | function | object

날짜를 이벤트로 표시(날짜 선택기만 가능)

이름
first-day-of-week
디폴트
0
타입
string | number

Sets the first day of the week, starting with 0 for Sunday.

이름
full-width
디폴트
false
타입
boolean

100% 너비(width)를 가지도록 강제

이름
header-color
디폴트
undefined
타입
string

헤더 색상을 정의. 지정되지 않은 경우 color prop이나 기본 피커 색상을 사용

이름
header-date-format
디폴트
null
타입
function

달력 헤더의 월 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
landscape
디폴트
false
타입
boolean

가로방향 피커

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
locale
디폴트
'en-us'
타입
string

로케일(locale) 설정. BCP 47 language tag 문자열.

이름
max
디폴트
undefined
타입
string

최대 날짜/월

이름
min
디폴트
undefined
타입
string

최소 날짜/월

이름
month-format
디폴트
null
타입
function

월 테이블에서 월을 표시하는 포맷팅 함수. date (ISO 8601 문자열)과 locale (문자열) 인자와 함께 호출.

이름
multiple New in — v1.2
디폴트
false
타입
boolean

Components.DatePickers.

이름
next-icon
디폴트
'$vuetify.icons.next'
타입
string

다음 달/년 버튼의 아이콘

이름
no-title
디폴트
false
타입
boolean

피커의 타이틀을 숨김

이름
picker-date
디폴트
undefined
타입
string

표시되는 년/월

이름
prev-icon
디폴트
'$vuetify.icons.prev'
타입
string

이전 달/년 버튼의 아이콘

이름
reactive
디폴트
false
타입
boolean

Components.DatePickers.

이름
readonly
디폴트
false
타입
boolean

읽기전용으로 만듬 (새로운 날짜를 선택하거나 다른 년/월로 이동할 수 없음)

이름
scrollable
디폴트
false
타입
boolean

마우스 스크롤로 월을 바꿈.

이름
show-current
디폴트
true
타입
boolean | string

현재 날짜/월이나 현재 날짜/월로 지정된 날짜/월이 outline으로 표시될지 결정

이름
show-week New in — v1.4
디폴트
false
타입
boolean

Components.DatePickers.

이름
title-date-format
디폴트
null
타입
function

선택기 타이틀의 날짜 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
type
디폴트
'date'
타입
string

선택기의 타입을 결정 - date는 날짜 선택, month는 월 선택

이름
value
디폴트
undefined
타입
array | string

표시여부를 조절 (Controls visibility)

이름
weekday-format New in — v1.3
디폴트
null
타입
function

Components.DatePickers.

이름
width
디폴트
290
타입
number | string

The width of the content

이름
year-format
디폴트
null
타입
function

달력 헤더의 년 형식을 조절하는 함수. 인자: date (ISO 8601 문자열), locale (문자열)

이름
year-icon
디폴트
undefined
타입
string

년 다음에 나오는 아이콘

예제

Date pickers - 색상 (Colors)

날짜 선택기의 색은 colorhead-color prop으로 설정할 수 있습니다. if-header-color prop이 없으면 color prop의 값이 사용됩니다.

Date pickers - 대화창과 메뉴에서 사용하기 (In dialog and menu)

선택기를 v-text-field 에 결합 하려면, readonly prop을 사용하는 것을 권장합니다. 이는 모바일 키보드가 작동하는 것을 방지합니다. 세로 공간을 절약하려면 선택기의 제목을 숨길수 있습니다.

선택기(Pickers)는 저장(save), 취소(cancel) 기능을 가로챌 수 있는(hook) 스코프드 슬롯(socped slot)을 제공합니다. This will maintain an old value which can be replaced if the user cancels.

Date pickers - formatting date

If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.

Date pickers - formatting date using external libs

Formatting dates is possible also with external libs such as Moment.js or date-fns

Date pickers - 특정 날짜 허용 (Allowed dates)

배열, 오브젝트, 함수를 이용하여 선택 가능한 날짜를 정할 수 있습니다.

Date pickers - Mutiple

Date picker can now select multiple dates with the multiple prop. If using multiple then date picker expects its model to be an array.

Date pickers - 너비 조절 (Setting picker width)

선택기의 너비를 조절하거나 꽉 차게 만들 수 있습니다.

Date pickers - 생년월일 선택기 (birthday picker)

기본적으로 년도를 먼저 선택하고, 월/일로 줄여나간 후 날짜를 선택하면 종료되는 방법으로 완벽한 생년월일 선택기를 만들 수 있습니다.

Date pickers - react to disaplyed month/year change

You can watch the pickerDate which is the displayed month/year (depending on the picker type and active view) to perform some action when it changes.

Date pickers - 이벤트 (Events)

배열, 오브젝트, 함수를 사용해서 이벤트를 지정할 수 있습니다. 기본 색깔을 바꾸려면 event-color prop을 사용합니다.

Date pickers - 국제화 (Internationalization)

자바스크립트의 Date 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.

Date pickers - 아이콘 (icons)

선택기에서 사용하는 아이콘을 바꿀 수 있습니다.

Date pickers - 읽기전용 (read only)

readonly prop은 날짜 선택을 비활성화 합니다.

Date pickers - 오늘 날짜 표시 (current date indicator)

기본적으로 오늘 날짜는 테두리형 버튼(outline button)으로 표시됩니다. show-current prop은 테두리(border)를 제거하거나 다른 날짜를 오늘 날짜처럼 보이게 만들 수 있습니다.

월 선택기 (Month pickers)

Month pickers 는 세로(portrait) 와 가로(landscape0) 두 방향의 변형이 있습니다. 기본 모드는 세로입니다.

Month pickers - 색상 (Colors)

Month picker의 색은 colorhead-color prop으로 설정할 수 있습니다. if-header-color prop이 없으면 color prop의 값이 사용됩니다.

Month pickers - 대화창과 메뉴에서 사용하기 (In dialog and menu)

선택기를 v-text-field 에 결합 하려면, readonly prop을 사용하는 것을 권장합니다. 이는 모바일 키보드가 작동하는 것을 방지합니다. 세로 공간을 절약하려면 선택기의 제목을 숨길수 있습니다.

선택기(Pickers)는 저장(save), 취소(cancel) 기능을 가로챌 수 있는(hook) 스코프드 슬롯(socped slot)을 제공합니다. This will maintain an old value which can be replaced if the user cancels.

Month pickers - 특정 달 허용 (Allowed dates)

배열, 오브젝트, 함수를 이용하여 선택 가능한 달를 정할 수 있습니다.

Month pickers - Multiple

Month pickers can now select multiple months with the multiple prop. If using multiple then the month picker expects its model to be an array.

Month pickers - 너비 조절 (Setting picker width)

선택기의 너비를 조절하거나 꽉 차게 만들 수 있습니다.

Month pickers - 국제화 (Internationalization)

자바스크립트의 Date 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.

Month pickers - 아이콘 (icons)

선택기에서 사용하는 아이콘을 바꿀 수 있습니다.

Month pickers - 읽기전용 (read only)

readonly prop은 날짜 선택을 비활성화 합니다.

Month pickers - 현재 월 표시 (current month indicator)

기본적으로 이번 달은 테두리형 버튼(outline button)으로 표시됩니다. show-current prop은 테두리(border)를 제거하거나 다른 달를 현재 월처럼 보이게 만들 수 있습니다.

Edit this page | language on Github