mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-11 21:12:27 +03:00
Code Activity

feat: add disabledCalendarChanger (#628)

Browse Source
This commit is contained in:
mengxiong10
2022-06-12 10:36:32 +08:00
parent d09739f900
commit f487d11f3b
6 changed files with 146 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/calendar-panel.js
+27 -6
View File
@@ -33,6 +33,10 @@ export default {
defaultPanel: {
type: String,
},
disabledCalendarChanger: {
type: Function,
default: () => false,
},
disabledDate: {
type: Function,
default: () => false,
@@ -185,19 +189,33 @@ export default {
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
},
getMonthClasses(month) {
if (this.type !== 'month') {
return this.calendarMonth === month ? 'active' : '';
}
const classes = [];
if (this.type !== 'month') {
if (this.calendarMonth === month) {
classes.push('active');
}
const cellDate = this.getMonthCellDate(month);
if (this.disabledCalendarChanger(cellDate, 'month')) {
classes.push('disabled');
}
return classes;
}
const cellDate = this.getMonthCellDate(month);
classes.push(this.getStateClass(cellDate));
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
},
getYearClasses(year) {
if (this.type !== 'year') {
return this.calendarYear === year ? 'active' : '';
}
const classes = [];
if (this.type !== 'year') {
if (this.calendarYear === year) {
classes.push('active');
}
const cellDate = this.getYearCellDate(year);
if (this.disabledCalendarChanger(cellDate, 'year')) {
classes.push('disabled');
}
return classes;
}
const cellDate = this.getYearCellDate(year);
classes.push(this.getStateClass(cellDate));
return classes.concat(this.getClasses(cellDate, this.innerValue, classes.join(' ')));
@@ -227,6 +245,7 @@ export default {
if (panel === 'year') {
return (
<TableYear
disabledCalendarChanger={this.disabledCalendarChanger}
calendar={innerCalendar}
getCellClasses={this.getYearClasses}
getYearPanel={this.getYearPanel}
@@ -238,6 +257,7 @@ export default {
if (panel === 'month') {
return (
<TableMonth
disabledCalendarChanger={this.disabledCalendarChanger}
calendar={innerCalendar}
getCellClasses={this.getMonthClasses}
onSelect={this.handleSelectMonth}
@@ -248,6 +268,7 @@ export default {
}
return (
<TableDate
disabledCalendarChanger={this.disabledCalendarChanger}
class={{ [`${this.prefixClass}-calendar-week-mode`]: this.type === 'week' }}
calendar={innerCalendar}
getCellClasses={this.getDateClasses}
src/calendar/icon-button.vue
+8 -1
View File
@@ -1,7 +1,13 @@
<template>
<button
type="button"
:class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`"
:disabled="disabled"
:class="[
`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`,
{
disabled: disabled,
},
]"
v-on="$listeners"
>
<i :class="`${prefixClass}-icon-${type}`"></i>
@@ -12,6 +18,7 @@
export default {
props: {
type: String,
disabled: Boolean,
},
inject: {
prefixClass: {
src/calendar/table-date.vue
+46 -4
View File
@@ -1,10 +1,26 @@
<template>
<div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-date`">
<div :class="`${prefixClass}-calendar-header`">
<icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
<icon-button type="left" @click="handleIconLeftClick"></icon-button>
<icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
<icon-button type="right" @click="handleIconRightClick"></icon-button>
<icon-button
type="double-left"
:disabled="isDisabledArrows('last-year')"
@click="handleIconDoubleLeftClick"
></icon-button>
<icon-button
type="left"
:disabled="isDisabledArrows('last-month')"
@click="handleIconLeftClick"
></icon-button>
<icon-button
type="double-right"
:disabled="isDisabledArrows('next-year')"
@click="handleIconDoubleRightClick"
></icon-button>
<icon-button
type="right"
:disabled="isDisabledArrows('next-month')"
@click="handleIconRightClick"
></icon-button>
<span :class="`${prefixClass}-calendar-header-label`">
<button
v-for="item in yearMonth"
@@ -87,6 +103,10 @@ export default {
},
},
props: {
disabledCalendarChanger: {
type: Function,
default: () => false,
},
calendar: {
type: Date,
default: () => new Date(),
@@ -141,6 +161,28 @@ export default {
},
},
methods: {
isDisabledArrows(type) {
const date = new Date(this.calendar);
switch (type) {
case 'last-year':
date.setFullYear(date.getFullYear() - 1, date.getMonth() + 1, 0);
date.setHours(23, 59, 59, 999);
break;
case 'next-year':
date.setFullYear(date.getFullYear() + 1);
break;
case 'last-month':
date.setMonth(date.getMonth(), 0);
date.setHours(23, 59, 59, 999);
break;
case 'next-month':
date.setMonth(date.getMonth() + 1);
break;
default:
break;
}
return this.disabledCalendarChanger(date, type);
},
handleIconLeftClick() {
this.$emit(
'changecalendar',
src/calendar/table-month.vue
+30 -3
View File
@@ -1,8 +1,16 @@
<template>
<div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-month`">
<div :class="`${prefixClass}-calendar-header`">
<icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
<icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
<icon-button
type="double-left"
:disabled="isDisabledArrows('last-year')"
@click="handleIconDoubleLeftClick"
></icon-button>
<icon-button
type="double-right"
:disabled="isDisabledArrows('next-year')"
@click="handleIconDoubleRightClick"
></icon-button>
<span :class="`${prefixClass}-calendar-header-label`">
<button
type="button"
@@ -49,6 +57,10 @@ export default {
},
},
props: {
disabledCalendarChanger: {
type: Function,
default: () => false,
},
calendar: {
type: Date,
default: () => new Date(),
@@ -72,6 +84,21 @@ export default {
},
},
methods: {
isDisabledArrows(type) {
const date = new Date(this.calendar);
switch (type) {
case 'last-year':
date.setFullYear(date.getFullYear() - 1, 11, 31);
date.setHours(23, 59, 59, 999);
break;
case 'next-year':
date.setFullYear(date.getFullYear() + 1, 0, 1);
break;
default:
break;
}
return this.disabledCalendarChanger(date, type);
},
handleIconDoubleLeftClick() {
this.$emit(
'changecalendar',
@@ -95,7 +122,7 @@ export default {
target = target.parentNode;
}
const month = target.getAttribute('data-month');
if (month) {
if (month && !target.classList.contains('disabled')) {
this.$emit('select', parseInt(month, 10));
}
},
src/calendar/table-year.vue
+30 -3
View File
@@ -1,8 +1,16 @@
<template>
<div :class="`${prefixClass}-calendar ${prefixClass}-calendar-panel-year`">
<div :class="`${prefixClass}-calendar-header`">
<icon-button type="double-left" @click="handleIconDoubleLeftClick"></icon-button>
<icon-button type="double-right" @click="handleIconDoubleRightClick"></icon-button>
<icon-button
type="double-left"
:disabled="isDisabledArrows('last-decade')"
@click="handleIconDoubleLeftClick"
></icon-button>
<icon-button
type="double-right"
:disabled="isDisabledArrows('next-decade')"
@click="handleIconDoubleRightClick"
></icon-button>
<span :class="`${prefixClass}-calendar-header-label`">
<span>{{ firstYear }}</span>
<span :class="`${prefixClass}-calendar-decade-separator`"></span>
@@ -41,6 +49,10 @@ export default {
},
},
props: {
disabledCalendarChanger: {
type: Function,
default: () => false,
},
calendar: {
type: Date,
default: () => new Date(),
@@ -70,6 +82,21 @@ export default {
},
},
methods: {
isDisabledArrows(type) {
const date = new Date(this.calendar);
switch (type) {
case 'last-decade':
date.setFullYear(this.firstYear - 1, 11, 31);
date.setHours(23, 59, 59, 999);
break;
case 'next-decade':
date.setFullYear(this.lastYear + 1, 0, 1);
break;
default:
break;
}
return this.disabledCalendarChanger(date, type);
},
getYears(calendar) {
const firstYear = Math.floor(calendar.getFullYear() / 10) * 10;
const years = [];
@@ -98,7 +125,7 @@ export default {
target = target.parentNode;
}
const year = target.getAttribute('data-year');
if (year) {
if (year && !target.classList.contains('disabled')) {
this.$emit('select', parseInt(year, 10));
}
},
src/style/btn.scss
+5
View File
@@ -18,6 +18,11 @@
border-color: $primary-color;
color: $primary-color;
}
&:disabled,
&.disabled {
color: $disabled-color;
cursor: not-allowed;
}
}
.#{$namespace}-btn-text {