VueJS Datepicker 更改 position 日期和月份

Question

我正在使用這個 datepicker - vuejs-datepicker 。 當前日期格式為 MM.DD.YYYY，但我需要 DD.MM.YYYY 格式。 為此，我使用了以下 customFormatter function。

customDatepickerFormatter: function (date) {
      return moment(date).format("DD.MM.YYYY");
    },

但是，例如 21.09.2022 的輸入被拒絕，因為 vuejs datepicker 將日期解釋為 09.21.2022，這顯然不是有效日期。 你能幫我解決這個問題嗎？

Answer 1

這是我如何集成一個簡單但友好的支持歐盟格式的格式化程序。

<template>
  <section>
    <div>
      Input your date (DD MM YYYY format)
      <input type="text" v-model.lazy="date" /> <!-- updating on focus lost -->
    </div>
    <p>result: {{ formatted }}</p>
  </section>
</template>

<script>
import { format } from "date-fns";

export default {
  data() {
    return {
      date: "20 11 2020", 
    };
  },
  computed: {
    formatted() {
      let [day, month, year] = this.date.split(/\D/) // safe for the separation
      return format(new Date(year, month - 1, day), "PPP") // month - 1 offset is to make it simpler to compute
    },
  },
};
</script>

這是它的樣子

---

否則，它看起來像這個 package 顯然也很適合你： https://vuejscomponent.com/vuejs-datepicker-europedateformat