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

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

＆＃13;

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()}`
    }
  }
})

＆＃13;

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

＆＃13;

Vuejs2 - 日期格式在vue2-datepicker中发布

1 个答案: