Date/month picker
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.
Usage
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
Restricts which dates can be selected
コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccess
やpurple
)や、CSSの色指定(#033
やrgba(255, 0, 0, 0.5)
)を設定できます。
ダークテーマを適用します。
Allows you to customize the format of the day string that appears in the date table. Called with date (ISO 8601 string) and locale (string) arguments.
Components.DatePickers.
Sets the color for event dot. It can be string (all events will have the same color) or object
where attribute is the event date and value is the color for specified date or function
taking date as a parameter and returning color for that date
Marks the date as an event (only for date picker)
Sets the first day of the week, starting with 0 for Sunday.
Components.DatePickers.
Components.DatePickers.
Allows you to customize the format of the month string that appears in the header of the calendar. Called with date (ISO 8601 string) and locale (string) arguments.
Components.DatePickers.
ライトテーマを適用します。
Sets the locale. Accepts a string with a BCP 47 language tag.
Maximum allowed date/month
Minimum allowed date/month
Formatting function used for displaying months in the months table. Called with date (ISO 8601 string) and locale (string) arguments.
Components.DatePickers.
Components.DatePickers.
Components.DatePickers.
Displayed year/month
Components.DatePickers.
Components.DatePickers.
Makes the picker readonly (doesnt't allow to select new date or navigate through months/years)
Allows changing displayed month with mouse scroll
Toggles visibility of the current date/month outline or shows the provided date/month as a current
Components.DatePickers.
Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 string) and locale (string) arguments.
Determines the type of the picker - date
for date picker, month
for month picker
Components.DatePickers.
Components.DatePickers.
Components.DatePickers.
Allows you to customize the format of the year string that appears in the header of the calendar. Called with date (ISO 8601 string) and locale (string) arguments.
Generates an icon next to the year
Examples
Date pickers - Colors
Date picker colors can be set using the color
and header-color
props. If header-color
prop is not provided header will use the color
prop value.
Date pickers - In dialog and menu
When integrating a picker into a v-text-field
, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.
Pickers expose a scoped slot that allow you to hook into save and cancel functionality. 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
You can specify allowed dates using arrays, objects, and functions.
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
You can specify allowed the picker's width or make it full width.
Date pickers - birthday picker
Starting with year picker by default, resticting dates range and closing the picker menu after selecting the day make the perfect 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
You can specify events using arrays, objects, and functions. To change the default color of the event use event-color prop.
Date pickers - Internationalization
The date picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale
prop, and then set the first day of the week with the first-day-of-week
prop.
Date pickers - icons
You can override the default icons used in the picker.
Date pickers - read only
Selecting new date could be disabled by adding readonly prop.
Date pickers - current date indicator
By default the current date is displayed using outline button - show-current prop allows you to remove the border or select different date to be displayed as the current one.
Month pickers
Month pickers come in two orientation variations, portrait (default) and landscape.
Month pickers - Colors
Month picker colors can be set using the color
and header-color
props. If header-color
prop is not provided header will use the color
prop value.
Month pickers - In dialog and menu
When integrating a picker into a v-text-field
, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.
Pickers expose a scoped slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.
Month pickers - Allowed months
You can specify allowed months using arrays, objects, and functions.
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
You can specify allowed the picker's width or make it full width.
Month pickers - Internationalization
The month picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale
prop, and then set the first day of the week with the first-day-of-week
prop.
Month pickers - icons
You can override the default icons used in the picker.
Month pickers - read only
Selecting new date could be disabled by adding readonly prop.
Month pickers - current month indicator
By default the current month is displayed using outline button - show-current prop allows you to remove the border or select different month to be displayed as the current one.