mirror of
https://framagit.org/framasoft/mobilizon.git
synced 2024-12-22 07:52:43 +00:00
Issue #1571 Hide the time when the user chooses to not display it
This commit is contained in:
parent
9992286e7e
commit
7f43169fae
2 changed files with 16 additions and 3 deletions
|
@ -1,6 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
|
<!--
|
||||||
|
:key is required to force rerender when time change
|
||||||
|
If not used, the input becomes empty
|
||||||
|
See : https://vuejs.org/api/built-in-special-attributes.html#key
|
||||||
|
-->
|
||||||
<input
|
<input
|
||||||
type="datetime-local"
|
:type="time ? 'datetime-local' : 'date'"
|
||||||
|
:key="time.toString()"
|
||||||
class="rounded invalid:border-red-500"
|
class="rounded invalid:border-red-500"
|
||||||
v-model="component"
|
v-model="component"
|
||||||
:min="computeMin"
|
:min="computeMin"
|
||||||
|
@ -13,6 +19,7 @@ import { computed } from "vue";
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
modelValue: Date | null;
|
modelValue: Date | null;
|
||||||
|
time: boolean;
|
||||||
min?: Date | null | undefined;
|
min?: Date | null | undefined;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
|
@ -25,7 +32,7 @@ const emit = defineEmits(["update:modelValue", "blur"]);
|
||||||
/** Format a Date to 'YYYY-MM-DDTHH:MM' based on local time zone */
|
/** Format a Date to 'YYYY-MM-DDTHH:MM' based on local time zone */
|
||||||
const UTCToLocal = (date: Date) => {
|
const UTCToLocal = (date: Date) => {
|
||||||
const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
|
const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
|
||||||
return localDate.toISOString().slice(0, 16);
|
return localDate.toISOString().slice(0, props.time ? 16 : 10);
|
||||||
};
|
};
|
||||||
|
|
||||||
const component = computed({
|
const component = computed({
|
||||||
|
@ -36,12 +43,16 @@ const component = computed({
|
||||||
return UTCToLocal(props.modelValue);
|
return UTCToLocal(props.modelValue);
|
||||||
},
|
},
|
||||||
set(value) {
|
set(value) {
|
||||||
console.log("value" + value);
|
|
||||||
if (!value) {
|
if (!value) {
|
||||||
emit("update:modelValue", null);
|
emit("update:modelValue", null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const date = new Date(value);
|
const date = new Date(value);
|
||||||
|
|
||||||
|
if (!props.time) {
|
||||||
|
date.setHours(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
emit("update:modelValue", date);
|
emit("update:modelValue", date);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -67,6 +67,7 @@
|
||||||
label-for="begins-on-field"
|
label-for="begins-on-field"
|
||||||
>
|
>
|
||||||
<event-date-picker
|
<event-date-picker
|
||||||
|
:time="eventOptions.showStartTime"
|
||||||
v-model="beginsOn"
|
v-model="beginsOn"
|
||||||
@blur="consistencyBeginsOnBeforeEndsOn"
|
@blur="consistencyBeginsOnBeforeEndsOn"
|
||||||
></event-date-picker>
|
></event-date-picker>
|
||||||
|
@ -83,6 +84,7 @@
|
||||||
class="items-center"
|
class="items-center"
|
||||||
>
|
>
|
||||||
<event-date-picker
|
<event-date-picker
|
||||||
|
:time="eventOptions.showEndTime"
|
||||||
v-model="endsOn"
|
v-model="endsOn"
|
||||||
@blur="consistencyBeginsOnBeforeEndsOn"
|
@blur="consistencyBeginsOnBeforeEndsOn"
|
||||||
:min="beginsOn"
|
:min="beginsOn"
|
||||||
|
|
Loading…
Reference in a new issue