Select Git revision
InputDatePicker.vue

Marcel Nellesen authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
InputDatePicker.vue 2.73 KiB
<template>
<datepicker
:id="cssId"
:language="datepickerLanguage[this.languageCode]"
:calendar-button="true"
calendar-button-icon="material-icons"
calendar-button-icon-content="date_range"
v-model="selectedDate"
:bootstrap-styling="true"
:full-month-name="true"
format="dd MMMM yyyy"
@input="updateFixedValuesOverwrite"
:disabled="disabledMode || locked"
:required="required"
/>
</template>
<script lang="ts">
import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';
import { de, en } from 'vuejs-datepicker/dist/locale';
import FieldReader from '@/util/FieldReader';
export default Vue.extend({
name: 'InputDatePicker',
beforeMount() {
// take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
this.replacePlaceholder();
// set the datatype
this.$set(this.formData[this.nodeName][0], 'type', 'literal');
this.$set(
this.formData[this.nodeName][0],
'datatype',
'http://www.w3.org/2001/XMLSchema#date'
);
if (this.fixedValueMode) {
this.updateFixedValuesOverwrite();
}
},
data() {
return {
datepickerLanguage: {
de,
en,
},
selectedDate: new Date(),
};
},
props: {
cssId: String,
invisible: Boolean,
locked: Boolean,
required: Boolean,
nodeName: String,
formFieldInformation: Array,
formData: Object,
fixedValueMode: Boolean,
disabledMode: Boolean,
checkDataField: Function,
checkField: Function,
updateFixedValues: Function,
v: Object,
},
components: {
Datepicker,
},
methods: {
replacePlaceholder() {
if (this.checkDataField(this.formData, this.nodeName)) {
if (this.formData[this.nodeName][0]['value'] === '{TODAY}') {
if (this.fixedValueMode) {
return;
}
this.selectedDate = new Date();
} else if (this.formData[this.nodeName][0]['value'] === '') {
this.selectedDate = new Date();
} else {
this.selectedDate = new Date(
this.formData[this.nodeName][0]['value']
);
}
this.$set(
this.formData[this.nodeName][0],
'value',
this.selectedDate.toISOString().slice(0, 10)
);
}
},
updateFixedValuesOverwrite() {
FieldReader.setField(
this.formData,
this.v,
this.nodeName,
this.selectedDate.toISOString().slice(0, 10),
this.$set
);
this.updateFixedValues();
},
},
});
</script>
<style>
.vdp-datepicker .form-control {
background-color: #ffffff;
}
.vdp-datepicker__calendar-button {
height: calc(1.4em + 0.75rem + 2px);
}
</style>
<style scoped></style>