VueDatePicker Как менять значение placeholder при выборе даты?

Question

Помогите, пожалуйста, взял первую попавшуюся библиотеку datapicker под Vue3 Написал вот такой код для данного компонента.

<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 коде, я вижу одно, а выводит мне совершенно другое...

Answer 1

Если кто-то столкнеться с такой же проблемой, то реализация отображения данного "атрибута" описана тут. Как написано выше, после выбора даты 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>

БЛОГ НА HUSL

VueDatePicker Как менять значение placeholder при выборе даты?

Ответы (1 шт):