VueJS Datepicker change the position day and month

Question

I am using this datepicker - vuejs-datepicker. Current date format is MM.DD.YYYY, but I need it in DD.MM.YYYY format. For this I used the following customFormatter function.

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

However, the input for example 21.09.2022 is rejected because vuejs datepicker interprets the date as 09.21.2022 which is obviously not a valid date. Can you help me fix this?

Answer 1

Here is how I would integrate a simple but friendly formater supporting EU formatting.

<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>

This is how it looks

---

Otherwise it looks like this package could also be a nice fit for you apparently: https://vuejscomponent.com/vuejs-datepicker-europedateformat