主页 / 问题 / 1553203
Accepted
BlackStar1991
Asked:2023-11-26 04:39:55 +0000 UTC2023-11-26 04:39:55 +0000 UTC

VueDatePicker 如何更改选择日期时的占位符值？

  • 772

请帮忙，我使用了我在 Vue3 中遇到的第一个datapicker 库。我为这个组件编写了以下代码。

<template>
        <VueDatePicker
            class="datetimepicker"
            v-model="date"
            :placeholder="getFormattedPlaceholder()"
            @change="onDateChange"
        />
   
</template>

<script>
import { ref } from 'vue';
import format from 'date-fns/format';

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

export default {
  components: { VueDatePicker },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      date: null,
      placeholderText: 'Start Date',
    };
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return format(date, 'MMMM d, yyyy');
    },
    getFormattedPlaceholder() {
      return this.date ? this.formatDate(this.date) : this.placeholderText;
    },
    onDateChange() {
      // Дополнительные действия при изменении даты, если нужно
    },
  },
};
</script>

因此，我希望当用户在日期选择器中选择日期时，它以正常格式显示给他（format(date, 'MMMM d, yyyy');）。但由于某种原因它不起作用。请告诉我我在哪里犯了错误？在html代码中，我看到了一件事，但它向我展示了完全不同的东西...... 在此输入图像描述

vue.js

1 个回答

  1. Best Answer

    如果有人遇到同样的问题，那么这里描述显示这个“属性”的实现。如上所述，选择日期后，placeholder不显示，组件显示天知道什么（更准确地说，我不明白在DOM树中哪里可以找到它）。最终结果如下所示。

    <template>
 <VueDatePicker
            class="datetimepicker"
            v-model="date"
            :preview-format="format"
        >
          <template #trigger>
            <p class="clickable-text">{{getFormattedPlaceholder()}}</p>
          </template>
        </VueDatePicker>
</template>
<script>
import { ref } from 'vue';
import format from 'date-fns/format';

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
import {da} from "date-fns/locale";

export default {
  components: { VueDatePicker},
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      date: null,
      placeholderText: 'Start Date',
    };
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return format(date, 'MMMM d, yyyy');
    },

    format(date) {return format(date, 'MMM d, yyyy', { locale: this.da }); },

    getFormattedPlaceholder() {
      return this.date ? this.format(this.date) : this.placeholderText;
    },
  },
};
</script>
    • 0

相关问题