Limit minimum endsOn datetime selector to current beginsOn, set correct

date of first week and translate labels on datepicker

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-11 18:41:29 +02:00
parent 77830ec4a8
commit dc4504e091
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
5 changed files with 53 additions and 2 deletions

View File

@ -13,12 +13,23 @@
</docs> </docs>
<template> <template>
<b-field grouped horizontal :label="label"> <b-field grouped horizontal :label="label">
<b-datepicker expanded v-model="date" :placeholder="$t('Click to select')" icon="calendar"></b-datepicker> <b-datepicker
:day-names="localeShortWeekDayNamesProxy"
:month-names="localeMonthNamesProxy"
expanded
:first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
:min-date="minDate"
v-model="date"
:placeholder="$t('Click to select')"
icon="calendar"
/>
<b-input expanded type="time" required v-model="time" /> <b-input expanded type="time" required v-model="time" />
</b-field> </b-field>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { localeMonthNames, localeShortWeekDayNames } from '@/utils/datetime';
@Component @Component
export default class DateTimePicker extends Vue { export default class DateTimePicker extends Vue {
/** /**
@ -37,9 +48,17 @@ export default class DateTimePicker extends Vue {
*/ */
@Prop({ required: false, type: Number, default: 1 }) step!: number; @Prop({ required: false, type: Number, default: 1 }) step!: number;
/**
* Earliest date available for selection
*/
@Prop({ required: false, type: Date, default: null }) minDate!: Date;
date: Date = this.value; date: Date = this.value;
time: string = '00:00'; time: string = '00:00';
localeShortWeekDayNamesProxy = localeShortWeekDayNames();
localeMonthNamesProxy = localeMonthNames();
mounted() { mounted() {
this.convertTime(); this.convertTime();
} }

View File

@ -265,6 +265,7 @@
"Your local administrator resumed it's policy:": "Your local administrator resumed it's policy:", "Your local administrator resumed it's policy:": "Your local administrator resumed it's policy:",
"a decentralised federation protocol": "a decentralised federation protocol", "a decentralised federation protocol": "a decentralised federation protocol",
"e.g. 10 Rue Jangot": "e.g. 10 Rue Jangot", "e.g. 10 Rue Jangot": "e.g. 10 Rue Jangot",
"firstDayOfWeek": "0",
"iCal Feed": "iCal Feed", "iCal Feed": "iCal Feed",
"interconnect with others like it": "interconnect with others like it", "interconnect with others like it": "interconnect with others like it",
"its source code is public": "its source code is public", "its source code is public": "its source code is public",

View File

@ -303,6 +303,7 @@
"Your local administrator resumed it's policy:": "Votre administrateur local a résumé sa politique ainsi :", "Your local administrator resumed it's policy:": "Votre administrateur local a résumé sa politique ainsi :",
"a decentralised federation protocol": "un protocole de fédération décentralisée", "a decentralised federation protocol": "un protocole de fédération décentralisée",
"e.g. 10 Rue Jangot": "par exemple : 10 Rue Jangot", "e.g. 10 Rue Jangot": "par exemple : 10 Rue Jangot",
"firstDayOfWeek": "1",
"iCal Feed": "Flux iCal", "iCal Feed": "Flux iCal",
"interconnect with others like it": "sinterconnecter simplement avec dautres", "interconnect with others like it": "sinterconnecter simplement avec dautres",
"its source code is public": "son code source est public", "its source code is public": "son code source est public",

21
js/src/utils/datetime.ts Normal file
View File

@ -0,0 +1,21 @@
function localeMonthNames(): string[] {
const monthNames: string[] = [];
for (let i = 0; i < 12; i += 1) {
const d = new Date(2019, i, 1);
const month = d.toLocaleString('default', { month: 'long' });
monthNames.push(month);
}
return monthNames;
}
function localeShortWeekDayNames(): string[] {
const weekDayNames: string[] = [];
for (let i = 13; i < 20; i += 1) {
const d = new Date(2019, 9, i);
const weekDay = d.toLocaleString('default', { weekday: 'short' });
weekDayNames.push(weekDay);
}
return weekDayNames;
}
export { localeMonthNames, localeShortWeekDayNames };

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…')" :step="15"/> <date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" :step="15"/>
<date-time-picker v-model="event.endsOn" :label="$t('Ends on…')" :step="15" /> <date-time-picker :min-date="minDateForEndsOn" v-model="event.endsOn" :label="$t('Ends on…')" :step="15" />
<address-auto-complete v-model="event.physicalAddress" /> <address-auto-complete v-model="event.physicalAddress" />
@ -569,6 +569,15 @@ export default class EditEvent extends Vue {
this.event.endsOn.setUTCHours(dateEndsOn.getUTCHours() + 1); this.event.endsOn.setUTCHours(dateEndsOn.getUTCHours() + 1);
} }
} }
/**
* In event endsOn datepicker, we lock starting with the day before the beginsOn date
*/
get minDateForEndsOn(): Date {
const minDate = new Date(this.event.beginsOn);
minDate.setDate(minDate.getDate() - 1);
return minDate;
}
} }
</script> </script>