javascript 如何在我的项目中使用vuetify 3.3.4日期选择器组件?

hrysbysz  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(162)

我正在尝试使用最新的vuetify 3(3.3.4版本-实验室)日期选择器组件。我在项目组件文件夹中创建了一个日期输入组件。
/components/DateInput.vue

<template>
  <div>
    <v-menu
      v-model="menu"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ props }">
        <v-text-field
          v-bind="props"
          :value="dateFormatted"
          variant="outlined"
          append-inner-icon="mdi-calendar"
          @change="onChange"
          @input="updateDate"
        ></v-text-field>
      </template>
      <v-date-picker
        :value="getDate"   
        @change="onChange"
        @input="updateDate"
      ></v-date-picker>
    </v-menu>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * Date on ISO format to be edited.
     * @model
     */
    value: {
      type: String,
      default() {
        return ""
      },
    },
  },
  data() {
    return {
      menu: false,
    };
  },
  computed: {
    dateFormatted() {
      return this.input ? new Date(this.input) : "";
    },
    getDate() {
      /**
       * Return ISO 8601
       */
      let date = this.input ? new Date(this.input) : new Date();

      let month = 1 + date.getMonth();
      if (month < 10) {
        month = `0${month}`;
      }
      let day = date.getDate();
      if (day < 10) {
        day = `0${day}`;
      }
      return `${date.getFullYear()}-${month}-${day}`;
    },
  },
  methods: {
    onChange(val) {
      console.error(val)
    },
    updateDate(val) {
      this.menu = false;
      console.error(val)
    },
  },
};
</script>

/App.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="6">
        <date-input></date-input>
      </v-col>  
    </v-row>
  </v-container>
  
</template>

<script>
import DateInput from './components/DateInput.vue';

export default {
  components: {
    DateInput,
  },
}
</script>

当我试图选择一个日期,我总是得到一个错误如下。

我哪里做错了?我将项目部署到codesanbox,这里是codesanbox链接。
https://codesandbox.io/p/github/eguvenc/test/main

jdgnovmf

jdgnovmf1#

那是个bug in the VDatePicker component它已经修复了,但除非你想切换到nightly build,我认为你必须等待下一个版本。
但是,通过传入正确的:modelValue属性(您似乎使用了一个不存在的:value属性),可以避免该问题。注意:modelValue必须是一个包含Date对象的数组。所以试试这样的:

<v-date-picker
        :modelValue="getDate"
        @update:modelValue="updateDate"
      ></v-date-picker>

(note不再有@change事件,@input在Vue 3中是@update:modelValue)。
然后让getDate返回一个Date数组:

getDate() {
  const date = this.input ? new Date(this.input) : new Date()
  return [date]
}

相关问题