vue.js - Vue 格式日期从 DD-MM-YYYY 到 MM-DD-YYYY

Question

我是 Vue Js 的新手。我已经使用添加了下拉日期vue-date-dropdown。目前日期下拉菜单的格式是 DD-MM-YYYY，有没有办法将其更改为 MM-DD-YYYY？

包链接vue-date-dropdown= https://www.npmjs.com/package/vue-date-dropdown

我的观点

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

这是我现在的日期下拉图像。它显示为 DD MM YYYY 格式。有没有办法将此 UI 代码更改为 MM DD YYYY 格式？

这是我上传的代码jsfiddle

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

标签： vue.js

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