Min-Max, Disabled Dates and Navigator support for Calendar
cagataycivici
parent
bcaa232733
commit
c7eb28908f
|
|
@ -14,7 +14,13 @@
|
|||
</button>
|
||||
<div class="p-datepicker-title">
|
||||
<span class="p-datepicker-month" v-if="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
|
||||
<select class="p-datepicker-month" v-if="monthNavigator && (view !== 'month') && numberOfMonths === 1" @change="onMonthDropdownChange($event.target.value)">
|
||||
<option :value="index" v-for="(monthName, index) of locale.monthNames" :key="monthName" :selected="index === month.month">{{monthName}}</option>
|
||||
</select>
|
||||
<span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
|
||||
<select class="p-datepicker-year" v-if="yearNavigator && numberOfMonths === 1" @change="onYearDropdownChange($event.target.value)">
|
||||
<option :value="year" v-for="year of yearOptions" :key="year" :selected="year === currentYear">{{year}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-datepicker-calendar-container" v-if="view ==='date'">
|
||||
|
|
@ -90,8 +96,16 @@ export default {
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
panelClass: String,
|
||||
panelStyle: null,
|
||||
yearRange: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
panelClass: {
|
||||
type: String
|
||||
},
|
||||
panelStyle: {
|
||||
type: null
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
value: null
|
||||
|
|
@ -125,7 +139,9 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
appendTo: null,
|
||||
appendTo: {
|
||||
type: null
|
||||
},
|
||||
showOnFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
@ -412,6 +428,33 @@ export default {
|
|||
else {
|
||||
this.overlayVisible = false;
|
||||
}
|
||||
},
|
||||
isDateDisabled(day, month, year) {
|
||||
if (this.disabledDates) {
|
||||
for (let disabledDate of this.disabledDates) {
|
||||
if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
isDayDisabled(day, month, year) {
|
||||
if (this.disabledDays) {
|
||||
let weekday = new Date(year, month, day);
|
||||
let weekdayNumber = weekday.getDay();
|
||||
return this.disabledDays.indexOf(weekdayNumber) !== -1;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
onMonthDropdownChange(value) {
|
||||
this.currentMonth = parseInt(value);
|
||||
this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
|
||||
},
|
||||
onYearDropdownChange(value) {
|
||||
this.currentYear = parseInt(value);
|
||||
this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -541,6 +584,18 @@ export default {
|
|||
},
|
||||
datePattern() {
|
||||
return this.dateFormat || this.locale.dateFormat;
|
||||
},
|
||||
yearOptions() {
|
||||
const years = this.yearRange.split(':');
|
||||
const yearStart = parseInt(years[0]);
|
||||
const yearEnd = parseInt(years[1]);
|
||||
let yearOptions = [];
|
||||
|
||||
for (let i = yearStart; i <= yearEnd; i++) {
|
||||
yearOptions.push(i);
|
||||
}
|
||||
|
||||
return yearOptions;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,18 @@
|
|||
<h3>Icon</h3>
|
||||
<Calendar v-model="date3" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Min-Max</h3>
|
||||
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :readonly="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Disable Days</h3>
|
||||
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :readonly="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Navigators</h3>
|
||||
<Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,11 +44,34 @@
|
|||
import CalendarDoc from './CalendarDoc'
|
||||
|
||||
export default {
|
||||
created() {
|
||||
console.log(this.es.firstDayOfWeek);
|
||||
let today = new Date();
|
||||
let month = today.getMonth();
|
||||
let year = today.getFullYear();
|
||||
let prevMonth = (month === 0) ? 11 : month -1;
|
||||
let prevYear = (prevMonth === 11) ? year - 1 : year;
|
||||
let nextMonth = (month === 11) ? 0 : month + 1;
|
||||
let nextYear = (nextMonth === 0) ? year + 1 : year;
|
||||
this.minDate = new Date();
|
||||
this.minDate.setMonth(prevMonth);
|
||||
this.minDate.setFullYear(prevYear);
|
||||
this.maxDate = new Date();
|
||||
this.maxDate.setMonth(nextMonth);
|
||||
this.maxDate.setFullYear(nextYear);
|
||||
|
||||
let invalidDate = new Date();
|
||||
invalidDate.setDate(today.getDate() - 1);
|
||||
this.invalidDates = [today,invalidDate];
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
date1: null,
|
||||
date2: null,
|
||||
date3: null,
|
||||
date4: null,
|
||||
date5: null,
|
||||
date6: null,
|
||||
es: {
|
||||
firstDayOfWeek: 1,
|
||||
dayNames: [ "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado" ],
|
||||
|
|
@ -47,7 +82,10 @@ export default {
|
|||
today: 'Hoy',
|
||||
clear: 'Borrar',
|
||||
weekHeader: 'Sm'
|
||||
}
|
||||
},
|
||||
minDate: null,
|
||||
maxDate: null,
|
||||
invalidDates: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue