Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 10 Pull requests Projects Releases 7 Packages Wiki Activity Actions

format dates to timezone

Browse source
This commit is contained in:
Julian Krauser 2024-11-07 10:49:50 +01:00
parent 747adf7c69
commit 4148b3191e
5 changed files with 61 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/admin/club/calendar/CreateCalendarModal.vue
View file

@ -99,7 +99,14 @@
</div>
<div class="w-full">
<label for="enddate">Enddatum</label>
<input ref="enddate" type="date" id="enddate" required :value="data.end" :min="data.start" />
<input
ref="enddate"
type="date"
id="enddate"
required
:value="decrementEndDate(data.end)"
:min="data.start"
/>
</div>
</div>
<div>
@ -198,6 +205,15 @@ export default defineComponent({
this.status = { status: "failed" };
});
},
decrementEndDate(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() - 1).padStart(2, "0");
return `${year}-${month}-${day}`;
},
},
});
</script>

54
src/components/admin/club/calendar/UpdateCalendarModal.vue
View file

@ -81,11 +81,11 @@
type="datetime-local"
id="starttime"
required
:value="calendar.starttime.replace('Z', '')"
:value="formatForDateTimeLocalInput(calendar.starttime)"
@change="
($event) => {
calendar!.starttime = ($event.target as HTMLInputElement).value;
$refs.endtime.min = ($event.target as HTMLInputElement).value;
calendar!.starttime = new Date(($event.target as HTMLInputElement).value).toISOString();
$refs.endtime.min = formatForDateTimeLocalInput(($event.target as HTMLInputElement).value);
}
"
/>
@ -97,11 +97,11 @@
type="datetime-local"
id="endtime"
required
:value="calendar.endtime.replace('Z', '')"
:min="calendar.starttime.replace('Z', '')"
:value="formatForDateTimeLocalInput(calendar.endtime)"
:min="formatForDateTimeLocalInput(calendar.starttime)"
@change="
($event) => {
calendar!.endtime = ($event.target as HTMLInputElement).value;
calendar!.endtime = new Date(($event.target as HTMLInputElement).value).toISOString();
}
"
/>
@ -114,11 +114,11 @@
type="date"
id="startdate"
required
:value="calendar.starttime.split('T')[0]"
:value="formatForDateInput(calendar.starttime)"
@change="
($event) => {
calendar!.starttime = ($event.target as HTMLInputElement).value;
$refs.enddate.min = ($event.target as HTMLInputElement).value;
calendar!.starttime = new Date(($event.target as HTMLInputElement).value).toISOString();
$refs.enddate.min = formatForDateInput(($event.target as HTMLInputElement).value);
}
"
/>
@ -130,11 +130,11 @@
type="date"
id="enddate"
required
:min="calendar.starttime.split('T')[0]"
:value="calendar.endtime.split('T')[0]"
:min="formatForDateInput(calendar.starttime)"
:value="formatForDateInput(calendar.endtime)"
@change="
($event) => {
calendar!.endtime = ($event.target as HTMLInputElement).value;
calendar!.endtime = new Date(($event.target as HTMLInputElement).value).toISOString();
}
"
/>
@ -229,7 +229,7 @@ export default defineComponent({
this.calendar = cloneDeep(this.origin);
},
fetchItem() {
this.fetchCalendarById(parseInt(this.data ?? ""))
this.fetchCalendarById(this.data ?? "")
.then((result) => {
this.calendar = result.data;
this.origin = cloneDeep(result.data);
@ -246,11 +246,11 @@ export default defineComponent({
id: this.calendar.id,
typeId: this.calendar.type.id,
starttime: this.calendar.allDay
? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0))
: formData.starttime.value,
? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0)).toISOString()
: new Date(formData.starttime.value).toISOString(),
endtime: this.calendar.allDay
? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999))
: formData.endtime.value,
? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999)).toISOString()
: new Date(formData.endtime.value).toISOString(),
title: formData.title.value,
content: formData.content.value,
location: formData.location.value,
@ -277,6 +277,26 @@ export default defineComponent({
this.origin.id
);
},
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}`;
},
},
});
</script>

2
src/stores/admin/calendar.ts
View file

@ -39,7 +39,7 @@ export const useCalendarStore = defineStore("calendar", {
this.loading = "failed";
});
},
fetchCalendarById(id: number): Promise<AxiosResponse<any, any>> {
fetchCalendarById(id: string): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/calendar/item/${id}`);
},
async createCalendar(calendar: CreateCalendarViewModel): Promise<AxiosResponse<any, any>> {

8
src/viewmodels/admin/calendar.models.ts
View file

@ -14,8 +14,8 @@ export interface CalendarViewModel {
}
export interface CreateCalendarViewModel {
starttime: Date;
endtime: Date;
starttime: string;
endtime: string;
title: string;
content: string;
location: string;
@ -25,8 +25,8 @@ export interface CreateCalendarViewModel {
export interface UpdateCalendarViewModel {
id: string;
starttime: Date;
endtime: Date;
starttime: string;
endtime: string;
title: string;
content: string;
location: string;

2
src/views/admin/club/calendar/Calendar.vue
View file

@ -35,6 +35,7 @@ export default defineComponent({
...mapState(useCalendarStore, ["formattedItems"]),
calendarOptions() {
return {
timeZone: "local",
locale: deLocale,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
@ -67,6 +68,7 @@ export default defineComponent({
...mapActions(useModalStore, ["openModal"]),
...mapActions(useCalendarStore, ["fetchCalendars"]),
select(e: any) {
console.log(e);
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
{