Vuejs2 - vue2-datepicker 中的日期格式问题

Question

我在我的 vuejs2 项目中使用“vue2-datepicker”插件。 “yyyy MM dd”是该 datpicker 中的默认格式，但我想要更改格式，如“dd MMM yyyy”（2016 年 5 月 16 日）。我已经更改了脚本中的格式，但它没有反映在 UI 中。它显示“16-05-2018”作为输出。

<template>
 <b-card>
   <div>
    <date-picker v-model="dob" :lang="lang" :format="format"></date-picker>
   </div>
 </b-card>
</template>

<script>
import DatePicker from 'vue2-datepicker'

eexport default {
  name: 'addEmpl',
   components: {
    DatePicker 
  },
  data () {
    return {
      dob: '',
      lang:{
        default : 'en'
      },
      format: 'dd-MMM-yyyy'
    }
  }
}
</script>

Answer 1

看起来 vue2-datepicker 的作者没有实现月份名称，即使它们包含在 some i18n files 中。

有一个 PR 开放用于改进文档 ~ https://github.com/mengxiong10/vue2-datepicker/pull/95

您必须实现自定义格式化程序。例如（使用DatePicker 组件中提供的translation 计算属性）...

Vue.use(DatePicker.default); // don't worry about this, it's just for the demo

new Vue({
  el: '#app',
  data: {
    dob: '',
    lang: 'en' // this sets the language object to use
  },
  methods: {
    formatDate (d) {
      // you could also provide your own month names array
      const months = this.$refs.datePicker.translation.months
      return `${d.getDate().toString().padStart(2, 0)} ${months[d.getMonth()]} ${d.getFullYear()}`
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker@1.9.7/dist/build.min.js"></script>
<div id="app">
  <date-picker ref="datePicker" v-model="dob" :lang="lang" :custom-formatter="formatDate"></date-picker>
</div>