vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor on Calendar

pull/41/head
mertsincan 2019-08-21 16:57:25 +03:00
parent 594484c97b
commit ee8a4d7a12
1 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/calendar/Calendar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<span :class="containerClass"> <span :class="containerClass">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" /> <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" v-model="inputFieldValue" :readonly="!manualInput" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" /> <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" />
<transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave"> <transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible"> <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible">
@ -308,6 +308,7 @@ export default {
}, },
created() { created() {
this.updateCurrentMetaData(); this.updateCurrentMetaData();
this.updateInputFieldValue(this.value);
}, },
beforeDestroy() { beforeDestroy() {
if (this.timePickerTimer) { if (this.timePickerTimer) {
@ -330,7 +331,8 @@ export default {
currentSecond: null, currentSecond: null,
pm: null, pm: null,
focused: false, focused: false,
overlayVisible: false overlayVisible: false,
inputFieldValue: null
} }
}, },
outsideClickListener: null, outsideClickListener: null,
@ -713,11 +715,13 @@ export default {
this.currentSecond = date.getSeconds(); this.currentSecond = date.getSeconds();
} }
let modelVal = null;
if (this.isSingleSelection()) { if (this.isSingleSelection()) {
this.updateModel(date); modelVal = date;
} }
else if (this.isMultipleSelection()) { else if (this.isMultipleSelection()) {
this.updateModel(this.value ? [...this.value, date] : [date]); modelVal = this.value ? [...this.value, date] : [date];
} }
else if (this.isRangeSelection()) { else if (this.isRangeSelection()) {
if (this.value && this.value.length) { if (this.value && this.value.length) {
@ -731,19 +735,58 @@ export default {
startDate = date; startDate = date;
endDate = null; endDate = null;
} }
modelVal = [startDate, endDate];
this.updateModel([startDate, endDate]);
} }
else { else {
this.updateModel([date, null]); modelVal = [date, null];
} }
} }
if (modelVal !== null) {
this.updateModel(modelVal);
this.updateInputFieldValue(modelVal);
}
this.$emit('select', date); this.$emit('select', date);
}, },
updateModel(value) { updateModel(value) {
this.$emit('input', value); this.$emit('input', value);
}, },
updateInputFieldValue(date) {
let formattedValue = '';
if (date) {
try {
if (this.isSingleSelection()) {
formattedValue = this.formatDateTime(date);
}
else if (this.isMultipleSelection()) {
for(let i = 0; i < date.length; i++) {
let dateAsString = this.formatDateTime(date[i]);
formattedValue += dateAsString;
if(i !== (date.length - 1)) {
formattedValue += ', ';
}
}
}
else if (this.isRangeSelection()) {
if (date && date.length) {
let startDate = date[0];
let endDate = date[1];
formattedValue = this.formatDateTime(startDate);
if (endDate) {
formattedValue += ' - ' + this.formatDateTime(endDate);
}
}
}
}
catch(err) {
formattedValue = date;
}
}
this.inputFieldValue = formattedValue;
},
shouldSelectDate() { shouldSelectDate() {
if (this.isMultipleSelection()) if (this.isMultipleSelection())
return this.maxDateCount != null ? this.maxDateCount > (this.value ? this.value.length : 0) : true; return this.maxDateCount != null ? this.maxDateCount > (this.value ? this.value.length : 0) : true;
@ -1465,7 +1508,7 @@ export default {
} }
catch(err) { catch(err) {
//invalid date //invalid date
$vm.updateModel(val); $vm.updateModel(null);
} }
}, },
focus: event => { focus: event => {
@ -1477,7 +1520,17 @@ export default {
$vm.$emit('focus', event) $vm.$emit('focus', event)
}, },
blur: event => { blur: event => {
$vm.focused = false; try {
let value = $vm.parseValueFromString(event.target.value);
if ($vm.isValidSelection(value)) {
$vm.updateInputFieldValue(value);
}
}
catch(err) {
//invalid date
$vm.inputFieldValue = null;
}
$vm.focused = false;
$vm.$emit('blur', event); $vm.$emit('blur', event);
}, },
keydown: event => { keydown: event => {
@ -1526,42 +1579,6 @@ export default {
} }
]; ];
}, },
inputFieldValue() {
let formattedValue = '';
if (this.value) {
try {
if (this.isSingleSelection()) {
formattedValue = this.formatDateTime(this.value);
}
else if (this.isMultipleSelection()) {
for(let i = 0; i < this.value.length; i++) {
let dateAsString = this.formatDateTime(this.value[i]);
formattedValue += dateAsString;
if(i !== (this.value.length - 1)) {
formattedValue += ', ';
}
}
}
else if (this.isRangeSelection()) {
if (this.value && this.value.length) {
let startDate = this.value[0];
let endDate = this.value[1];
formattedValue = this.formatDateTime(startDate);
if (endDate) {
formattedValue += ' - ' + this.formatDateTime(endDate);
}
}
}
}
catch(err) {
formattedValue = this.value;
}
}
return formattedValue;
},
months() { months() {
let months = []; let months = [];
for (let i = 0 ; i < this.numberOfMonths; i++) { for (let i = 0 ; i < this.numberOfMonths; i++) {