Skip to content
Snippets Groups Projects
Select Git revision
  • 785ead61c034f5e84c93bc98b8e82da77448e91b
  • master default protected
  • Issue/2960-infiniteLoop
  • Issue/2960-fixValidationForAP
  • dev protected
  • Issue/2920-fixRemovingValues
  • Hotfix/2957-styleAndUpgrade
  • Hotfix/2955-storingFail
  • Issue/2943-uiFeedback
  • Issue/2551-enhanceSymbolDescriptionsInApplicationProfile
  • Issue/2598-vue3
  • Issue/2804-templateUI
  • Issue/2805-ignoreTemplatingValues
  • Issue/2851-fixBooleanInFormGenerator
  • Issue/2759-showMissingField
  • Issue/2703-vocabularyList
  • Issue/2729-fixSlowLoadingOfInstances
  • Issue/2525-fixedFixValues
  • Hotfix/2681-validationErrors
  • testing
  • Issue/2408-hasValue
  • v4.0.5
  • v4.0.4
  • v4.0.3
  • v4.0.2
  • v4.0.1
  • v4.0.0
  • v3.6.3
  • v3.6.2
  • v3.6.1
  • v3.6.0
  • v3.5.7
  • v3.5.6
  • v3.5.5
  • v3.5.4
  • v3.5.3
  • v3.5.2
  • v3.5.1
  • v3.5.0
  • v3.4.0
  • v3.3.0
41 results

InputDatePicker.vue

Blame
  • 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>