fix: calendar entry creation time shift
This commit is contained in:
parent
1fa0d07bba
commit
4a5aec36dd
2 changed files with 53 additions and 10 deletions
|
@ -79,11 +79,30 @@
|
||||||
<div v-if="!allDay" class="flex flex-row gap-2">
|
<div v-if="!allDay" class="flex flex-row gap-2">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label for="starttime">Startzeit</label>
|
<label for="starttime">Startzeit</label>
|
||||||
<input type="datetime-local" id="starttime" required :value="data.start.split(':00+')[0]" />
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
id="starttime"
|
||||||
|
required
|
||||||
|
:value="formatForDateTimeLocalInput(data.start)"
|
||||||
|
@change="
|
||||||
|
($event) => {
|
||||||
|
($refs.endtime as HTMLInputElement).min = formatForDateTimeLocalInput(
|
||||||
|
($event.target as HTMLInputElement).value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label for="endtime">Endzeit</label>
|
<label for="endtime">Endzeit</label>
|
||||||
<input type="datetime-local" id="endtime" required :value="data.end.split(':00+')[0]" />
|
<input
|
||||||
|
ref="endtime"
|
||||||
|
type="datetime-local"
|
||||||
|
id="endtime"
|
||||||
|
required
|
||||||
|
:value="formatForDateTimeLocalInput(data.end)"
|
||||||
|
:min="formatForDateTimeLocalInput(data.start)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="flex flex-row gap-2">
|
<div v-else class="flex flex-row gap-2">
|
||||||
|
@ -93,8 +112,12 @@
|
||||||
type="date"
|
type="date"
|
||||||
id="startdate"
|
id="startdate"
|
||||||
required
|
required
|
||||||
:value="data.start"
|
:value="formatForDateInput(data.start)"
|
||||||
@change="($event) => (($refs.enddate as HTMLInputElement).max = ($event.target as HTMLInputElement).value)"
|
@change="
|
||||||
|
($event) => {
|
||||||
|
($refs.enddate as HTMLInputElement).min = formatForDateInput(($event.target as HTMLInputElement).value);
|
||||||
|
}
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
|
@ -105,7 +128,7 @@
|
||||||
id="enddate"
|
id="enddate"
|
||||||
required
|
required
|
||||||
:value="decrementEndDate(data.end)"
|
:value="decrementEndDate(data.end)"
|
||||||
:min="data.start"
|
:min="formatForDateInput(data.start)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -180,11 +203,11 @@ export default defineComponent({
|
||||||
let createCalendar: CreateCalendarViewModel = {
|
let createCalendar: CreateCalendarViewModel = {
|
||||||
typeId: this.selectedType.id,
|
typeId: this.selectedType.id,
|
||||||
starttime: this.allDay
|
starttime: this.allDay
|
||||||
? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0))
|
? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0)).toISOString()
|
||||||
: formData.starttime.value,
|
: new Date(formData.starttime.value).toISOString(),
|
||||||
endtime: this.allDay
|
endtime: this.allDay
|
||||||
? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999))
|
? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999)).toISOString()
|
||||||
: formData.endtime.value,
|
: new Date(formData.endtime.value).toISOString(),
|
||||||
title: formData.title.value,
|
title: formData.title.value,
|
||||||
content: formData.content.value,
|
content: formData.content.value,
|
||||||
location: formData.location.value,
|
location: formData.location.value,
|
||||||
|
@ -209,6 +232,26 @@ export default defineComponent({
|
||||||
const month = String(localDate.getMonth() + 1).padStart(2, "0");
|
const month = String(localDate.getMonth() + 1).padStart(2, "0");
|
||||||
const day = String(localDate.getDate() - 1).padStart(2, "0");
|
const day = String(localDate.getDate() - 1).padStart(2, "0");
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
},
|
||||||
|
formatForDateTimeLocalInput(utcDateString: string) {
|
||||||
|
const localDate = new Date(utcDateString);
|
||||||
|
|
||||||
|
const year = localDate.getFullYear();
|
||||||
|
const month = String(localDate.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(localDate.getDate()).padStart(2, "0");
|
||||||
|
const hours = String(localDate.getHours()).padStart(2, "0");
|
||||||
|
const minutes = String(localDate.getMinutes()).padStart(2, "0");
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||||
|
},
|
||||||
|
formatForDateInput(utcDateString: string) {
|
||||||
|
const localDate = new Date(utcDateString);
|
||||||
|
|
||||||
|
const year = localDate.getFullYear();
|
||||||
|
const month = String(localDate.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(localDate.getDate()).padStart(2, "0");
|
||||||
|
|
||||||
return `${year}-${month}-${day}`;
|
return `${year}-${month}-${day}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -78,7 +78,7 @@
|
||||||
<input type="checkbox" id="allDay" v-model="calendar.allDay" />
|
<input type="checkbox" id="allDay" v-model="calendar.allDay" />
|
||||||
<label for="allDay">ganztägig</label>
|
<label for="allDay">ganztägig</label>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="calendar.allDay == false" class="flex flex-row gap-2">
|
<div v-if="!calendar.allDay" class="flex flex-row gap-2">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label for="starttime">Startzeit</label>
|
<label for="starttime">Startzeit</label>
|
||||||
<input
|
<input
|
||||||
|
|
Loading…
Add table
Reference in a new issue