[Vuejs]-Vuetify: Adaptive v-date-picker width v-dialog and v-menu

by

0👍

✅

Thanks to KrasnokutskiyEA for the idea.

Work version:

<template>
  <div>
    <template v-if="$vuetify.breakpoint.xsOnly">
      <v-dialog
        ref="dialog"
        v-model="modal"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <slot name="input" ref="input" :on="on"/>
        </template>
        <slot name="picker" ref="picker"/>
      </v-dialog>
    </template>
    <template v-else>
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <slot name="input" ref="input" :on="on"/>
        </template>
        <slot name="picker" ref="picker"/>
      </v-menu>
    </template>
  </div>
</template>

<script>
    export default {
        name: "v-date",
        data() {
            return {
                menu: false,
                modal: false,
            }
        },
        methods: {
            close() {
                this.menu = false;
                this.modal = false;
            }
        }
    }
</script>

Use:

<v-date>
  <template v-slot:input="{ on }">
    <v-text-field
      label="Дедлайн"
      v-model="data.deadline"
      readonly
      v-on="on"
    />
  </template>
  <template v-slot:picker>
    <v-date-picker v-model="data.deadline" no-title scrollable>
      <v-spacer></v-spacer>
      <v-btn text color="primary" @click="$refs.deadline.close()">ОК</v-btn>
    </v-date-picker>
  </template>
</v-date>

Leave a comment