diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index 222bbfef4c..e04078e39e 100755 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -13,21 +13,24 @@
- {{getMonthName(month.month)}} - - {{view === 'month' ? currentYear : month.year}} - + + + + + {{yearPickerValues[0]}} - {{yearPickerValues[yearPickerValues.length - 1]}} + +
-
+
@@ -59,12 +62,18 @@ -
+
{{m}}
+
+ + {{y}} + +
@@ -86,7 +95,7 @@ @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button"> - {{formattedCurrentMinute}} + {{formattedCurrentMinute}}
-
- - -
@@ -46,23 +42,27 @@
- +
- +
- +
- + +
+
+ +
- +
@@ -129,20 +129,19 @@ export default { date14: null, dates1: null, dates2: null, - es: { - firstDayOfWeek: 1, - dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ], - dayNamesShort: [ "Dom","Lun","Mar","Mié","Jue","Vie","Sáb" ], - dayNamesMin: [ "D","L","M","X","J","V","S" ], - monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ], - monthNamesShort: [ "Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic" ], - today: 'Hoy', - clear: 'Borrar', - weekHeader: 'Sm' - }, minDate: null, maxDate: null, - invalidDates: null + invalidDates: null, + responsiveOptions: [ + { + breakpoint: '1400px', + numMonths: 2 + }, + { + breakpoint: '1200px', + numMonths: 1 + } + ] } }, components: { diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue index b5dc967af7..9a6616ef7c 100755 --- a/src/views/calendar/CalendarDoc.vue +++ b/src/views/calendar/CalendarDoc.vue @@ -161,9 +161,15 @@ export default {
Month Picker
-

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.

+

Month picker is used to select month and year only without the date, set viewi> mode as "month" to activate month picker.

-<Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /> +<Calendar v-model="value" view="month" dateFormat="mm/yy" /> + + +
Year Picker
+

Similar to the month picker, year picker can be used to select years only. Set view to "year" to display the year picker.

+ +<Calendar v-model="value" view="year" dateFormat="yy" />
Touch UI
@@ -243,7 +249,7 @@ export default {
- + @@ -252,22 +258,23 @@ export default { - + - + - + - + - + - +
view string dateType of view to display, valid values are "date" for datepicker and "month" for month picker.Type of view to display, valid values are "date", "month" and "year".
touchUIWhen enabled, calendar overlay is displayed as optimized for touch devices.
monthNavigatormonthNavigator boolean falseWhether the month should be rendered as a dropdown instead of text.Whether the month should be rendered as a dropdown instead of text.

Deprecated: Navigator is always on
yearNavigatoryearNavigator boolean falseWhether the year should be rendered as a dropdown instead of text.Whether the year should be rendered as a dropdown instead of text.

Deprecated: Navigator is always on.
yearRangeyearRange string nullThe range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).

+ Deprecated: Years are based on decades by default.
panelClass