vue2-datepicker日期格式不生效求助：需改为dd-MMM-yyyy

Alright, let's sort out this date format issue! The reason your dd-MMM-yyyy setting isn't taking effect is twofold: incorrect language configuration, and missing language package support for month abbreviations like "May" or "Jun". Here's how to fix it step by step:

1. Import the Required Language Package #

vue2-datepicker relies on language-specific packages to render localized elements like month abbreviations. You need to import the English language package first to make MMM work.

2. Correct the lang Configuration #

Your original lang: { default: 'en' } isn't the right format—this component expects a language code string (like 'en') or a full language object, not a nested object.

3. Add the parse Prop (Optional but Recommended) #

To ensure the component correctly parses input values in your target format, match the parse prop to your format prop. This avoids mismatches between display and parsing logic.

Modified Working Code #

<template>
  <b-card>
    <div>
      <date-picker 
        v-model="dob" 
        :lang="lang" 
        :format="format"
        :parse="format"
      ></date-picker>
    </div>
  </b-card>
</template>
<script>
import DatePicker from 'vue2-datepicker'
// Import the English language package to enable month abbreviations
import 'vue2-datepicker/locale/en'

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

Why This Works #

• Language Package Import: The vue2-datepicker/locale/en import adds the English localization data, which includes the month abbreviations needed for MMM to render as "May", "Jun", etc., instead of numeric months.
• Corrected lang Prop: Setting lang: 'en' tells the component to use the imported English localization.
• Matching parse Prop: By setting parse to the same value as format, you ensure the component reads and writes dates in your desired dd-MMM-yyyy format consistently.

If you're still having issues, double-check that you're using a recent stable version of vue2-datepicker—older versions might have slightly different configuration rules for language and formatting.

内容的提问来源于stack exchange，提问作者Ashwini