github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/DateField.vue (about)

     1  <template>
     2    <v-menu
     3      :close-on-content-click="false"
     4      ref="menuDatePicker"
     5      v-model="menuDatePicker"
     6    >
     7      <template v-slot:activator="{ on }">
     8        <v-text-field
     9          readonly
    10          v-on="on"
    11          :value="showDate(currentDate)"
    12          :label="label"
    13          :disabled="disabled"
    14        ></v-text-field>
    15      </template>
    16      <v-date-picker
    17        locale="fr-fr"
    18        v-model="vuetifyDate"
    19        no-title
    20        ref="datePicker"
    21        @change="save"
    22        :max="maxDate"
    23        full-width
    24      ></v-date-picker>
    25    </v-menu>
    26  </template>
    27  
    28  <script lang="ts">
    29  import Vue from "vue";
    30  import Component from "vue-class-component";
    31  import { Watch } from "vue-property-decorator";
    32  import { Formatter } from "@/logic/formatter";
    33  import { Date_ } from "@/logic/types";
    34  
    35  const DateFieldProps = Vue.extend({
    36    props: {
    37      currentDate: (String as unknown) as () => Date_,
    38      label: String,
    39      disabled: Boolean
    40    },
    41    model: {
    42      prop: "currentDate",
    43      event: "dateChanged"
    44    }
    45  });
    46  
    47  @Component({})
    48  export default class DateField extends DateFieldProps {
    49    showDate = Formatter.date;
    50    vuetifyDate: Date_ = "" as Date_;
    51    menuDatePicker = false;
    52  
    53    $refs!: {
    54      menuDatePicker: Vue & { save: (date: string) => void };
    55      datePicker: Vue & { activePicker: string };
    56    };
    57  
    58    save(date: string) {
    59      this.$refs.menuDatePicker.save(date);
    60    }
    61  
    62    get maxDate() {
    63      const d = new Date();
    64      d.setFullYear(d.getFullYear() + 3);
    65      return d.toISOString().substr(0, 10);
    66    }
    67  
    68    @Watch("vuetifyDate")
    69    i() {
    70      this.$emit("dateChanged", this.vuetifyDate);
    71    }
    72  
    73    @Watch("menuDatePicker")
    74    m(val: unknown) {
    75      val && this.$nextTick(() => (this.$refs.datePicker.activePicker = "YEAR"));
    76    }
    77  }
    78  </script>
    79  
    80  <style scoped></style>