Vuejs2 - формат даты, используемый в vue2-datepicker

Question

Я использую плагин "vue2-datepicker" в моем проекте vuejs2. «yyyy MM dd» является форматом по умолчанию для этого средства выбора данных, но я хочу изменить формат, например «dd MMM yyyy» (16 мая 2016 года). Я изменил формат в моем сценарии, но он не отражается в пользовательском интерфейсе. В качестве вывода отображается «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 реализовал названия месяцев, хотя они включены в некоторые файлы i18n .

Есть открытый PR для улучшения документации ~ https://github.com/mengxiong10/vue2-datepicker/pull/95

Вам нужно будет реализовать пользовательский форматер. Например (используя предоставленное translation вычисляемое свойство в компоненте DatePicker) ...

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>