The v-date-picker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting date/month.
v-date-picker accepts ISO 8601 date strings (YYYY-MM-DD). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) International Standards page.
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.
간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
날짜 선택기의 색은 color 와 head-color prop으로 설정할 수 있습니다. if-header-color prop이 없으면 color prop의 값이 사용됩니다.
배열, 오브젝트, 함수를 이용하여 선택 가능한 날짜를 정할 수 있습니다.
피커의 너비를 지정하거나 전체 너비로 만들 수도 있습니다.
The v-date-picker component supports elevation up to a maximum value of 24. For more information on elevations, visit the official Material Design elevations page.
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 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.
선택기에서 사용하는 아이콘을 바꿀 수 있습니다.
readonly prop은 날짜 선택을 비활성화 합니다.
By default the current date is displayed using outlined button - show-current prop allows you to remove the border or select different date to be displayed as the current one.
Month pickers 는 세로(portrait) 와 가로(landscape0) 두 방향의 변형이 있습니다. 기본 모드는 세로입니다.
Month picker의 색은 color 와 head-color prop으로 설정할 수 있습니다. if-header-color prop이 없으면 color prop의 값이 사용됩니다.
배열, 오브젝트, 함수를 이용하여 선택 가능한 달를 정할 수 있습니다.
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.
피커의 너비를 지정하거나 전체 너비로 만들 수도 있습니다.
자바스크립트의 Date 오브젝트를 통해 국제화를 지원합니다. locale prop에 BCP 47 언어 태그를 지정하고 first-day-of-week prop으로 한 주의 시작 요일을 설정하세요.
선택기에서 사용하는 아이콘을 바꿀 수 있습니다.
readonly prop은 날짜 선택을 비활성화 합니다.
By default the current month is displayed using outlined button - show-current prop allows you to remove the border or select different month to be displayed as the current one.
If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.
Formatting dates is possible also with external libs such as Moment.js or date-fns
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 picker can select date range with the range prop. When using range prop date picker expects its model to be an array of length 2 or empty.
기본적으로 년도를 먼저 선택하고, 월/일로 줄여나간 후 날짜를 선택하면 종료되는 방법으로 완벽한 생년월일 선택기를 만들 수 있습니다.
배열, 오브젝트, 함수를 사용해서 이벤트를 지정할 수 있습니다. 기본 색깔을 바꾸려면 event-color prop을 사용합니다.
더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!