104 lines
3 KiB
Vue
104 lines
3 KiB
Vue
<template>
|
|
<div class="form-floating">
|
|
<input
|
|
ref="inputDate"
|
|
:id="String(ipt_id)"
|
|
:class="String(ipt_class)"
|
|
:type="ipt_type"
|
|
:name="String(ipt_name)"
|
|
:placeholder="`${String(ipt_placeholder)} ${ipt_required ? '*' : ''}`"
|
|
v-model="ipt_value"
|
|
:autocomplete="String(ipt_autocomplete)"
|
|
:required="Boolean(ipt_required)"
|
|
@focus="startEditing"
|
|
@change="changed"
|
|
>
|
|
<label :for="String(ipt_id)">{{ `${String(ipt_placeholder)} ${ipt_required ? '*' : ''}` }}</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import trans from "../../../../ts/modules/trans";
|
|
|
|
export default defineComponent({
|
|
name: "InputBirthDate",
|
|
mixins: [trans],
|
|
data(): {
|
|
ipt_id: string | null;
|
|
ipt_class: string;
|
|
ipt_name: string;
|
|
ipt_placeholder: string;
|
|
ipt_autocomplete: string;
|
|
ipt_required: boolean;
|
|
ipt_value: string | undefined;
|
|
ipt_type: string;
|
|
cached_value: string | null;
|
|
} {
|
|
return {
|
|
ipt_id: null,
|
|
ipt_class: "form-control",
|
|
ipt_name: "birthdate",
|
|
ipt_placeholder: this.__("Date de naissance"),
|
|
ipt_autocomplete: "bday",
|
|
ipt_required: true,
|
|
ipt_value: undefined,
|
|
ipt_type: "text",
|
|
cached_value: null,
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}"),
|
|
data = JSON.parse(json);
|
|
this.ipt_id = data.id ?? this.ipt_id;
|
|
this.ipt_class = data.class ?? this.ipt_class;
|
|
this.ipt_name = data.name ?? this.ipt_name;
|
|
this.ipt_placeholder = data.placeholder ?? this.ipt_placeholder;
|
|
this.ipt_autocomplete = data.autocomplete ?? this.ipt_autocomplete;
|
|
this.ipt_required = data.required ?? this.ipt_required;
|
|
this.ipt_value = data.value;
|
|
|
|
// * Transform to date type before submit
|
|
this.$nextTick(() => {
|
|
const inputDate = this.$refs.inputDate as HTMLInputElement;
|
|
// * Input already filled.
|
|
if (inputDate.value) {
|
|
this.startEditing();
|
|
} else if (this.ipt_value) {
|
|
this.ipt_value = new Date(this.ipt_value).toLocaleDateString();
|
|
}
|
|
inputDate.closest("form")?.addEventListener("submit", () => {
|
|
this.startEditing();
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
beforeSubmit() {},
|
|
startEditing(): void {
|
|
const inputDate = this.$refs.inputDate as HTMLInputElement;
|
|
if (inputDate.value.length) {
|
|
this.cached_value = inputDate.value;
|
|
}
|
|
this.switchIptTypeToDate();
|
|
},
|
|
/**
|
|
* Change the input type to date
|
|
*/
|
|
switchIptTypeToDate(): void {
|
|
this.ipt_type = "date";
|
|
if (this.cached_value) {
|
|
const date = new Date(Date.parse(this.cached_value));
|
|
this.ipt_value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
|
|
.toISOString()
|
|
.split("T")[0] ?? date.toISOString().substring(0,10);
|
|
}
|
|
},
|
|
changed() {
|
|
const inputDate = this.$refs.inputDate as HTMLInputElement;
|
|
this.cached_value = inputDate.value;
|
|
this.switchIptTypeToDate();
|
|
}
|
|
},
|
|
});
|
|
</script>
|