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:
parent
39f7573729
commit
42402c2cfc
@ -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();
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
@ -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": "s’interconnecter simplement avec d’autres",
|
"interconnect with others like it": "s’interconnecter simplement avec d’autres",
|
||||||
"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
21
js/src/utils/datetime.ts
Normal 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 };
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user