Localization

Localization options

locale

Set the datepicker language

• Type: Locale
• Default: enUs

INFO

• This prop uses Locale object from date-fns library
• For more info about supported locales or adding a custom locale object, please visit date-fns documentation

Based on specified formats in formats prop, the datepicker will automatically format the values to the given language

Code Example

<template>
  <VueDatePicker v-model="date" :locale="znCh" />
</template>

<script setup>
  import { VueDatePicker } from "@vuepic/vue-datepicker"
  import { zhCn } from "date-fns/locale"
  import { ref } from 'vue';

  const date = ref(new Date());
</script>

Translating other elements

In the following list, you can find all the elements that can be translated via corresponding props:

INFO

• In the action row, you can set button text values via action-row prop
• Aria labels for the datepicker elements can be set via aria-labels prop
• To display different labels in formatted values, you can refer to formats prop
• To change calendar day names, refer to day-names prop
• To change the label for week number column in the calendar, refer to week-numbers prop