potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

fix: end datetime can't be before begin datetime.

Browse source 
Add a min-datetime to endsOn.
Add maxDatetime and minDatetime props to or custom datetime-picker component.
Use those new props inside date-picker and time-picker components to set
a correct range of date for both endsOn and beginsOn event elements.

See issue: #308.
This commit is contained in:
Leo Mouyna 2019-12-10 00:10:12 +01:00
parent 74c6eb277f
commit 3358da34f9
2 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
js/src/components/Event/DateTimePicker.vue
View file

@ -22,8 +22,9 @@
:day-names="localeShortWeekDayNamesProxy" :day-names="localeShortWeekDayNamesProxy"
:month-names="localeMonthNamesProxy" :month-names="localeMonthNamesProxy"
:first-day-of-week="parseInt($t('firstDayOfWeek'), 10)" :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
:min-date="minDate" :min-date="minDatetime"
v-model="dateWithoutTime" :max-date="maxDatetime"
v-model="dateWithTime"
:placeholder="$t('Click to select')" :placeholder="$t('Click to select')"
:years-range="[-2,10]" :years-range="[-2,10]"
icon="calendar" icon="calendar"
@ -33,6 +34,8 @@
placeholder="Type or select a time..." placeholder="Type or select a time..."
icon="clock" icon="clock"
v-model="dateWithTime" v-model="dateWithTime"
:min-time="minDatetime"
:max-time="maxDatetime"
size="is-small" size="is-small"
inline> inline>
</b-timepicker> </b-timepicker>
@ -65,23 +68,21 @@ export default class DateTimePicker extends Vue {
/** /**
* Earliest date available for selection * Earliest date available for selection
*/ */
@Prop({ required: false, type: Date, default: null }) minDate!: Date; @Prop({ required: false, type: Date, default: null }) minDatetime!: Date;
dateWithoutTime: Date = this.value; /**
dateWithTime: Date = this.dateWithoutTime; * Latest date available for selection
*/
@Prop({ required: false, type: Date, default: null }) maxDatetime!: Date;
dateWithTime: Date = this.value;
localeShortWeekDayNamesProxy = localeShortWeekDayNames(); localeShortWeekDayNamesProxy = localeShortWeekDayNames();
localeMonthNamesProxy = localeMonthNames(); localeMonthNamesProxy = localeMonthNames();
@Watch('value') @Watch('value')
updateValue() { updateValue() {
this.dateWithoutTime = this.value; this.dateWithTime = this.value;
this.dateWithTime = this.dateWithoutTime;
}
@Watch('dateWithoutTime')
updateDateWithoutTimeWatcher() {
this.updateDateTime();
} }
@Watch('dateWithTime') @Watch('dateWithTime')
@ -95,9 +96,7 @@ export default class DateTimePicker extends Vue {
* *
* @type {Date} * @type {Date}
*/ */
this.dateWithoutTime.setHours(this.dateWithTime.getHours()); this.$emit('input', this.dateWithTime);
this.dateWithoutTime.setMinutes(this.dateWithTime.getMinutes());
this.$emit('input', this.dateWithoutTime);
} }
} }
</script> </script>

6
js/src/views/Event/Edit.vue
View file

@ -22,7 +22,7 @@
<tag-input v-model="event.tags" :data="tags" path="title" /> <tag-input v-model="event.tags" :data="tags" path="title" />
<date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" /> <date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" />
<date-time-picker :min-date="minDateForEndsOn" v-model="event.endsOn" :label="$t('Ends on…')" /> <date-time-picker :min-datetime="event.beginsOn" v-model="event.endsOn" :label="$t('Ends on…')" />
<!-- <b-switch v-model="endsOnNull">{{ $t('No end date') }}</b-switch>--> <!-- <b-switch v-model="endsOnNull">{{ $t('No end date') }}</b-switch>-->
<b-button type="is-text" @click="dateSettingsIsOpen = true">{{ $t('Date parameters')}}</b-button> <b-button type="is-text" @click="dateSettingsIsOpen = true">{{ $t('Date parameters')}}</b-button>
@ -625,7 +625,7 @@ export default class EditEvent extends Vue {
return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent); return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
} }
get beginsOn() { return this.event.beginsOn; } get beginsOn(): Date { return this.event.beginsOn; }
@Watch('beginsOn', { deep: true }) @Watch('beginsOn', { deep: true })
onBeginsOnChanged(beginsOn) { onBeginsOnChanged(beginsOn) {
@ -634,7 +634,7 @@ export default class EditEvent extends Vue {
const dateEndsOn = new Date(this.event.endsOn); const dateEndsOn = new Date(this.event.endsOn);
if (dateEndsOn < dateBeginsOn) { if (dateEndsOn < dateBeginsOn) {
this.event.endsOn = dateBeginsOn; this.event.endsOn = dateBeginsOn;
this.event.endsOn.setHours(dateEndsOn.getHours()); this.event.endsOn.setHours(dateBeginsOn.getHours() + 1);
} }
if (dateEndsOn === dateBeginsOn) { if (dateEndsOn === dateBeginsOn) {
this.event.endsOn.setHours(dateEndsOn.getHours() + 1); this.event.endsOn.setHours(dateEndsOn.getHours() + 1);