vue-datetime格式错误的格式选项

Question

我正在使用vue-datetime插件，似乎format选项无法正常工作，请参见下文：

<datetime type="date" v-model="formData.testDate" input-class="form-control" format="DateTime.DATE_SHORT"></datetime>

它应输出为：DD/MM/YYYY，但应输出为随机字符串。

Answer 1

您正在尝试将格式应用于字符串。该格式应绑定到变量，该变量需要引用luxon的DateTime模块的所需格式选项。

<template>
  <div id="app">
    <datetime type="date" v-model="formData.testDate" input-class="form-control" :format="format" />
  </div>
</template>

<script>
import { DateTime } from 'luxon';

export default {
  name: 'app',
  components: {
  },
  data: () => ({
    formData: {
      testDate: '',
    },
    format: DateTime.DATE_SHORT,
  }),
}
</script>

Answer 2

使用datetime格式。
例如：

<datetime type="datetime" v-model="datetime13" format="yyyy-MM-dd HH:mm:ss"></datetime>

Answer 3

从vue-datetime documentation here开始，它指出您需要使用luxon和weekstart。确保安装两个npm install --save luxon vue-datetime weekstart这样的软件包。

在全局或本地注册DateTime软件包

全球

import { Datetime } from 'vue-datetime';
 
Vue.component('datetime', Datetime);

本地

import { Datetime } from 'vue-datetime';
 
Vue.extend({
  template: '...',
  components: {
    datetime: Datetime
  }
});

此vue-datetime使用luxon设置日期格式

<template>
<div>
  <datetime type="date"
  v-model="formData.testDate"
  input-class="form-control"
  :format="{ year: 'numeric', month: 'long', day: 'numeric' }">
  </datetime>

  <!-- Or use this -->

  <datetime type="date"
  v-model="formData.testDate"
  input-class="form-control"
  format="dd/MM/yyyy">
  </datetime>

</div>    
</template>

<script>
import { Datetime } from 'vue-datetime';
export default {
    data(){
        return {
            formData: {
                testDate: ''
            }
        }
    },
    components: {
        datetime: Datetime
    }
    
}
</script>

我希望我的回答会有所帮助

Answer 4

使用luxon

npm install --save luxon

和

import { DateTime } from 'luxon';
...
//yourDateFromForm = '2019-06-27T11:06:00.000Z'
console.log(DateTime.fromISO(this.yourDateFromForm).toFormat('DD/MM/YYYY'))