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

Add form support to `DatePicker`

pull/6632/head
Mert Sincan 2024-10-18 16:47:00 +01:00
parent 96e23250ca
commit 79f51434d7
3 changed files with 42 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/primevue/src/datepicker/BaseDatePicker.vue
View File

@ -1,12 +1,11 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseInput from '@primevue/core/baseinput';
import DatePickerStyle from 'primevue/datepicker/style'; import DatePickerStyle from 'primevue/datepicker/style';
export default { export default {
name: 'BaseDatePicker', name: 'BaseDatePicker',
extends: BaseComponent, extends: BaseInput,
props: { props: {
modelValue: null,
selectionMode: { selectionMode: {
type: String, type: String,
default: 'single' default: 'single'
@ -160,18 +159,6 @@ export default {
type: [String, Object], type: [String, Object],
default: 'body' default: 'body'
}, },
variant: {
type: String,
default: null
},
invalid: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
readonly: { readonly: {
type: Boolean, type: Boolean,
default: false default: false
@ -180,10 +167,6 @@ export default {
type: String, type: String,
default: null default: null
}, },
name: {
type: String,
default: null
},
id: { id: {
type: String, type: String,
default: null default: null
@ -232,10 +215,6 @@ export default {
return { severity: 'secondary', text: true, rounded: true }; return { severity: 'secondary', text: true, rounded: true };
} }
}, },
fluid: {
type: Boolean,
default: null
},
ariaLabelledby: { ariaLabelledby: {
type: String, type: String,
default: null default: null

76
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -533,7 +533,7 @@
<script> <script>
import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom'; import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
import { isEmpty, localeComparator } from '@primeuix/utils/object'; import { localeComparator } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import CalendarIcon from '@primevue/icons/calendar'; import CalendarIcon from '@primevue/icons/calendar';
@ -552,7 +552,7 @@ export default {
name: 'DatePicker', name: 'DatePicker',
extends: BaseDatePicker, extends: BaseDatePicker,
inheritAttrs: false, inheritAttrs: false,
emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'], emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
inject: { inject: {
$pcFluid: { default: null } $pcFluid: { default: null }
}, },
@ -687,20 +687,20 @@ export default {
}, },
methods: { methods: {
isComparable() { isComparable() {
return this.modelValue != null && typeof this.modelValue !== 'string'; return this.d_value != null && typeof this.d_value !== 'string';
}, },
isSelected(dateMeta) { isSelected(dateMeta) {
if (!this.isComparable()) { if (!this.isComparable()) {
return false; return false;
} }
if (this.modelValue) { if (this.d_value) {
if (this.isSingleSelection()) { if (this.isSingleSelection()) {
return this.isDateEquals(this.modelValue, dateMeta); return this.isDateEquals(this.d_value, dateMeta);
} else if (this.isMultipleSelection()) { } else if (this.isMultipleSelection()) {
let selected = false; let selected = false;
for (let date of this.modelValue) { for (let date of this.d_value) {
selected = this.isDateEquals(date, dateMeta); selected = this.isDateEquals(date, dateMeta);
if (selected) { if (selected) {
@ -710,9 +710,9 @@ export default {
return selected; return selected;
} else if (this.isRangeSelection()) { } else if (this.isRangeSelection()) {
if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta); if (this.d_value[1]) return this.isDateEquals(this.d_value[0], dateMeta) || this.isDateEquals(this.d_value[1], dateMeta) || this.isDateBetween(this.d_value[0], this.d_value[1], dateMeta);
else { else {
return this.isDateEquals(this.modelValue[0], dateMeta); return this.isDateEquals(this.d_value[0], dateMeta);
} }
} }
} }
@ -723,33 +723,33 @@ export default {
if (!this.isComparable()) return false; if (!this.isComparable()) return false;
if (this.isMultipleSelection()) { if (this.isMultipleSelection()) {
return this.modelValue.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear); return this.d_value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
} else if (this.isRangeSelection()) { } else if (this.isRangeSelection()) {
if (!this.modelValue[1]) { if (!this.d_value[1]) {
return this.modelValue[0]?.getFullYear() === this.currentYear && this.modelValue[0]?.getMonth() === month; return this.d_value[0]?.getFullYear() === this.currentYear && this.d_value[0]?.getMonth() === month;
} else { } else {
const currentDate = new Date(this.currentYear, month, 1); const currentDate = new Date(this.currentYear, month, 1);
const startDate = new Date(this.modelValue[0].getFullYear(), this.modelValue[0].getMonth(), 1); const startDate = new Date(this.d_value[0].getFullYear(), this.d_value[0].getMonth(), 1);
const endDate = new Date(this.modelValue[1].getFullYear(), this.modelValue[1].getMonth(), 1); const endDate = new Date(this.d_value[1].getFullYear(), this.d_value[1].getMonth(), 1);
return currentDate >= startDate && currentDate <= endDate; return currentDate >= startDate && currentDate <= endDate;
} }
} else { } else {
return this.modelValue.getMonth() === month && this.modelValue.getFullYear() === this.currentYear; return this.d_value.getMonth() === month && this.d_value.getFullYear() === this.currentYear;
} }
}, },
isYearSelected(year) { isYearSelected(year) {
if (!this.isComparable()) return false; if (!this.isComparable()) return false;
if (this.isMultipleSelection()) { if (this.isMultipleSelection()) {
return this.modelValue.some((currentValue) => currentValue.getFullYear() === year); return this.d_value.some((currentValue) => currentValue.getFullYear() === year);
} else if (this.isRangeSelection()) { } else if (this.isRangeSelection()) {
const start = this.modelValue[0] ? this.modelValue[0].getFullYear() : null; const start = this.d_value[0] ? this.d_value[0].getFullYear() : null;
const end = this.modelValue[1] ? this.modelValue[1].getFullYear() : null; const end = this.d_value[1] ? this.d_value[1].getFullYear() : null;
return start === year || end === year || (start < year && end > year); return start === year || end === year || (start < year && end > year);
} else { } else {
return this.modelValue.getFullYear() === year; return this.d_value.getFullYear() === year;
} }
}, },
isDateEquals(value, dateMeta) { isDateEquals(value, dateMeta) {
@ -1148,7 +1148,7 @@ export default {
} }
if (this.isMultipleSelection() && this.isSelected(dateMeta)) { if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta)); let newValue = this.d_value.filter((date) => !this.isDateEquals(date, dateMeta));
this.updateModel(newValue); this.updateModel(newValue);
} else { } else {
@ -1202,11 +1202,11 @@ export default {
if (this.isSingleSelection()) { if (this.isSingleSelection()) {
modelVal = date; modelVal = date;
} else if (this.isMultipleSelection()) { } else if (this.isMultipleSelection()) {
modelVal = this.modelValue ? [...this.modelValue, date] : [date]; modelVal = this.d_value ? [...this.d_value, date] : [date];
} else if (this.isRangeSelection()) { } else if (this.isRangeSelection()) {
if (this.modelValue && this.modelValue.length) { if (this.d_value && this.d_value.length) {
let startDate = this.modelValue[0]; let startDate = this.d_value[0];
let endDate = this.modelValue[1]; let endDate = this.d_value[1];
if (!endDate && date.getTime() >= startDate.getTime()) { if (!endDate && date.getTime() >= startDate.getTime()) {
endDate = date; endDate = date;
@ -1234,10 +1234,10 @@ export default {
this.$emit('date-select', date); this.$emit('date-select', date);
}, },
updateModel(value) { updateModel(value) {
this.$emit('update:modelValue', value); this.updateValue(value);
}, },
shouldSelectDate() { shouldSelectDate() {
if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true; if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.d_value ? this.d_value.length : 0) : true;
else return true; else return true;
}, },
isSingleSelection() { isSingleSelection() {
@ -1499,15 +1499,15 @@ export default {
return hours; return hours;
}, },
validateTime(hour, minute, second, pm) { validateTime(hour, minute, second, pm) {
let value = this.isComparable() ? this.modelValue : this.viewDate; let value = this.isComparable() ? this.d_value : this.viewDate;
const convertedHour = this.convertTo24Hour(hour, pm); const convertedHour = this.convertTo24Hour(hour, pm);
if (this.isRangeSelection()) { if (this.isRangeSelection()) {
value = this.modelValue[1] || this.modelValue[0]; value = this.d_value[1] || this.d_value[0];
} }
if (this.isMultipleSelection()) { if (this.isMultipleSelection()) {
value = this.modelValue[this.modelValue.length - 1]; value = this.d_value[this.d_value.length - 1];
} }
const valueDateString = value ? value.toDateString() : null; const valueDateString = value ? value.toDateString() : null;
@ -1635,14 +1635,14 @@ export default {
}, },
updateModelTime() { updateModelTime() {
this.timePickerChange = true; this.timePickerChange = true;
let value = this.isComparable() ? this.modelValue : this.viewDate; let value = this.isComparable() ? this.d_value : this.viewDate;
if (this.isRangeSelection()) { if (this.isRangeSelection()) {
value = this.modelValue[1] || this.modelValue[0]; value = this.d_value[1] || this.d_value[0];
} }
if (this.isMultipleSelection()) { if (this.isMultipleSelection()) {
value = this.modelValue[this.modelValue.length - 1]; value = this.d_value[this.d_value.length - 1];
} }
value = value ? new Date(value.getTime()) : new Date(); value = value ? new Date(value.getTime()) : new Date();
@ -1658,12 +1658,12 @@ export default {
value.setSeconds(this.currentSecond); value.setSeconds(this.currentSecond);
if (this.isRangeSelection()) { if (this.isRangeSelection()) {
if (this.modelValue[1]) value = [this.modelValue[0], value]; if (this.d_value[1]) value = [this.d_value[0], value];
else value = [value, null]; else value = [value, null];
} }
if (this.isMultipleSelection()) { if (this.isMultipleSelection()) {
value = [...this.modelValue.slice(0, -1), value]; value = [...this.d_value.slice(0, -1), value];
} }
this.updateModel(value); this.updateModel(value);
@ -2613,9 +2613,10 @@ export default {
}, },
onBlur(event) { onBlur(event) {
this.$emit('blur', { originalEvent: event, value: event.target.value }); this.$emit('blur', { originalEvent: event, value: event.target.value });
this.formField.onBlur?.();
this.focused = false; this.focused = false;
event.target.value = this.formatValue(this.modelValue); event.target.value = this.formatValue(this.d_value);
}, },
onKeyDown(event) { onKeyDown(event) {
if (event.code === 'ArrowDown' && this.overlay) { if (event.code === 'ArrowDown' && this.overlay) {
@ -2745,7 +2746,7 @@ export default {
}, },
computed: { computed: {
viewDate() { viewDate() {
let propValue = this.modelValue; let propValue = this.d_value;
if (propValue && Array.isArray(propValue)) { if (propValue && Array.isArray(propValue)) {
if (this.isRangeSelection()) { if (this.isRangeSelection()) {
@ -2772,7 +2773,7 @@ export default {
} }
}, },
inputFieldValue() { inputFieldValue() {
return this.formatValue(this.modelValue); return this.formatValue(this.d_value);
}, },
months() { months() {
let months = []; let months = [];
@ -2948,9 +2949,6 @@ export default {
}, },
panelId() { panelId() {
return this.d_id + '_panel'; return this.d_id + '_panel';
},
hasFluid() {
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
} }
}, },
components: { components: {

6
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -380,11 +380,11 @@ const classes = {
root: ({ instance, props, state }) => [ root: ({ instance, props, state }) => [
'p-datepicker p-component p-inputwrapper', 'p-datepicker p-component p-inputwrapper',
{ {
'p-invalid': props.invalid, 'p-invalid': instance.$invalid,
'p-inputwrapper-filled': props.modelValue, 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': state.focused || state.overlayVisible, 'p-inputwrapper-focus': state.focused || state.overlayVisible,
'p-focus': state.focused || state.overlayVisible, 'p-focus': state.focused || state.overlayVisible,
'p-datepicker-fluid': instance.hasFluid 'p-datepicker-fluid': instance.$fluid
} }
], ],
pcInputText: 'p-datepicker-input', pcInputText: 'p-datepicker-input',