format dates to timezone
This commit is contained in:
parent
747adf7c69
commit
4148b3191e
5 changed files with 61 additions and 23 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>> {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"))),
|
||||
{
|
||||
|
|
Loading…
Reference in a new issue