Vue 格式日期从 DD-MM-YYYY 到 MM-DD-YYYY答案

【问题标题】：Vue format date from DD-MM-YYYY to MM-DD-YYYYVue 格式日期从 DD-MM-YYYY 到 MM-DD-YYYY
【发布时间】：2020-05-25 01:44:18
【问题描述】：

我是 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/

【问题讨论】：

一个工作的 JSFiddle 会更可取
我建议选择不同的组件。任何返回字符串而不是实际 Date 对象的 "日期选择器" 都是荒谬的
你不能用那个组件做你想做的事。看source code；模板经过硬编码以显示“日-月-年”。选择一个不同的组件或 fork 这个组件并创建您自己的版本
帮自己一个忙，使用vcalendar.io之类的东西。

标签： vue.js

【解决方案1】：

您可以使用时刻并将日期更改为任何格式：

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

像这样：

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

【讨论】：

可能是我不清楚。 UI 的日期下拉菜单显示为 DD MM YYYY。有没有办法将 datedropdown 更改为 MM DD YYYY，以便显示。