Vue format date from DD-MM-YYYY to MM-DD-YYYY

问题

I am new to Vue Js. I have added dropdown date using vue-date-dropdown. Currently the format for date dropdown is DD-MM-YYYY, is there a way to change it to MM-DD-YYYY?

Package link for vue-date-dropdown = https://www.npmjs.com/package/vue-date-dropdown

My View

<b-form-group>
    <date-dropdown default="1993.02.27" min="1940" max="2020" :months-names="months" :format="'MM.DD.YYYY'" v-model="date_of_birth" id="dateDropdownDesign">
    </date-dropdown> 
    /** i tried to use :format date option , but it did not work **/
</b-form-group>

This is my image for date dropdown right now. It's displayed as DD MM YYYY format. Is there a way to change this UI code into MM DD YYYY format ?

Here is my code uploaded on jsfiddle

https://jsfiddle.net/ujjumaki/5pbzf012/2/

回答1:

you can use the moment and change date to any format:

moment(this.date_of_birth, "DD.MM.YYYY").format("MM.DD.YYYY")

like this :

<template>
  <div>
    <date-dropdown
      default="1993.02.27"
      min="1940"
      max="2020"
      :months-names="months"
      :format="'MM.DD.YYYY'"
      v-model="date_of_birth"
      id="dateDropdownDesign"
    >
    </date-dropdown>
    /** i tried to use :format date option , but it did not work **/
  </div>
</template>

<script>
import DateDropdown from "vue-date-dropdown";
import moment from "moment";

export default {
  components: {
    DateDropdown,
  },
  data() {
    return {
      date_of_birth: "",
      new_date_of_birth: "",
      months: "",
    };
  },
  watch: {
    date_of_birth() {
      this.new_date_of_birth = moment(this.date_of_birth, "DD.MM.YYYY").format("MM.DD.YYYY");
      console.log(this.date_of_birth);
      console.log(this.new_date_of_birth);
    },
    months() {
      console.log(this.months);
    },
  },
};
</script>

来源：https://stackoverflow.com/questions/61994592/vue-format-date-from-dd-mm-yyyy-to-mm-dd-yyyy

标签

Vue.js