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

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

@ -533,7 +533,7 @@
<script>
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 { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import CalendarIcon from '@primevue/icons/calendar';
@ -552,7 +552,7 @@ export default {
name: 'DatePicker',
extends: BaseDatePicker,
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: {
$pcFluid: { default: null }
},
@ -687,20 +687,20 @@ export default {
},
methods: {
isComparable() {
return this.modelValue != null && typeof this.modelValue !== 'string';
return this.d_value != null && typeof this.d_value !== 'string';
},
isSelected(dateMeta) {
if (!this.isComparable()) {
return false;
}
if (this.modelValue) {
if (this.d_value) {
if (this.isSingleSelection()) {
return this.isDateEquals(this.modelValue, dateMeta);
return this.isDateEquals(this.d_value, dateMeta);
} else if (this.isMultipleSelection()) {
let selected = false;
for (let date of this.modelValue) {
for (let date of this.d_value) {
selected = this.isDateEquals(date, dateMeta);
if (selected) {
@ -710,9 +710,9 @@ export default {
return selected;
} 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 {
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.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()) {
if (!this.modelValue[1]) {
return this.modelValue[0]?.getFullYear() === this.currentYear && this.modelValue[0]?.getMonth() === month;
if (!this.d_value[1]) {
return this.d_value[0]?.getFullYear() === this.currentYear && this.d_value[0]?.getMonth() === month;
} else {
const currentDate = new Date(this.currentYear, month, 1);
const startDate = new Date(this.modelValue[0].getFullYear(), this.modelValue[0].getMonth(), 1);
const endDate = new Date(this.modelValue[1].getFullYear(), this.modelValue[1].getMonth(), 1);
const startDate = new Date(this.d_value[0].getFullYear(), this.d_value[0].getMonth(), 1);
const endDate = new Date(this.d_value[1].getFullYear(), this.d_value[1].getMonth(), 1);
return currentDate >= startDate && currentDate <= endDate;
}
} 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) {
if (!this.isComparable()) return false;
if (this.isMultipleSelection()) {
return this.modelValue.some((currentValue) => currentValue.getFullYear() === year);
return this.d_value.some((currentValue) => currentValue.getFullYear() === year);
} else if (this.isRangeSelection()) {
const start = this.modelValue[0] ? this.modelValue[0].getFullYear() : null;
const end = this.modelValue[1] ? this.modelValue[1].getFullYear() : null;
const start = this.d_value[0] ? this.d_value[0].getFullYear() : null;
const end = this.d_value[1] ? this.d_value[1].getFullYear() : null;
return start === year || end === year || (start < year && end > year);
} else {
return this.modelValue.getFullYear() === year;
return this.d_value.getFullYear() === year;
}
},
isDateEquals(value, dateMeta) {
@ -1148,7 +1148,7 @@ export default {
}
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);
} else {
@ -1202,11 +1202,11 @@ export default {
if (this.isSingleSelection()) {
modelVal = date;
} else if (this.isMultipleSelection()) {
modelVal = this.modelValue ? [...this.modelValue, date] : [date];
modelVal = this.d_value ? [...this.d_value, date] : [date];
} else if (this.isRangeSelection()) {
if (this.modelValue && this.modelValue.length) {
let startDate = this.modelValue[0];
let endDate = this.modelValue[1];
if (this.d_value && this.d_value.length) {
let startDate = this.d_value[0];
let endDate = this.d_value[1];
if (!endDate && date.getTime() >= startDate.getTime()) {
endDate = date;
@ -1234,10 +1234,10 @@ export default {
this.$emit('date-select', date);
},
updateModel(value) {
this.$emit('update:modelValue', value);
this.updateValue(value);
},
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;
},
isSingleSelection() {
@ -1499,15 +1499,15 @@ export default {
return hours;
},
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);
if (this.isRangeSelection()) {
value = this.modelValue[1] || this.modelValue[0];
value = this.d_value[1] || this.d_value[0];
}
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;
@ -1635,14 +1635,14 @@ export default {
},
updateModelTime() {
this.timePickerChange = true;
let value = this.isComparable() ? this.modelValue : this.viewDate;
let value = this.isComparable() ? this.d_value : this.viewDate;
if (this.isRangeSelection()) {
value = this.modelValue[1] || this.modelValue[0];
value = this.d_value[1] || this.d_value[0];
}
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();
@ -1658,12 +1658,12 @@ export default {
value.setSeconds(this.currentSecond);
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];
}
if (this.isMultipleSelection()) {
value = [...this.modelValue.slice(0, -1), value];
value = [...this.d_value.slice(0, -1), value];
}
this.updateModel(value);
@ -2613,9 +2613,10 @@ export default {
},
onBlur(event) {
this.$emit('blur', { originalEvent: event, value: event.target.value });
this.formField.onBlur?.();
this.focused = false;
event.target.value = this.formatValue(this.modelValue);
event.target.value = this.formatValue(this.d_value);
},
onKeyDown(event) {
if (event.code === 'ArrowDown' && this.overlay) {
@ -2745,7 +2746,7 @@ export default {
},
computed: {
viewDate() {
let propValue = this.modelValue;
let propValue = this.d_value;
if (propValue && Array.isArray(propValue)) {
if (this.isRangeSelection()) {
@ -2772,7 +2773,7 @@ export default {
}
},
inputFieldValue() {
return this.formatValue(this.modelValue);
return this.formatValue(this.d_value);
},
months() {
let months = [];
@ -2948,9 +2949,6 @@ export default {
},
panelId() {
return this.d_id + '_panel';
},
hasFluid() {
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
}
},
components: {

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

@ -380,11 +380,11 @@ const classes = {
root: ({ instance, props, state }) => [
'p-datepicker p-component p-inputwrapper',
{
'p-invalid': props.invalid,
'p-inputwrapper-filled': props.modelValue,
'p-invalid': instance.$invalid,
'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-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',