Localization

Localization options and label props

Info

• If you use the component in the browser <script> tag, make sure to pass multi-word props with -, for example, formatLocale as format-locale and so on

locale

Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names

• Type: string
• Default: 'en-US'

Code Example

<template>
    <VueDatePicker v-model="date" locale="de" cancelText="abbrechen" selectText="auswählen" />
</template>

<script setup>
import { ref } from 'vue';

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

format-locale

Specify localized format output. 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

Note

When format-locale is provided, it will have priority against locale prop

• Type: Locale
• Default: null

Code Example

<template>
    <VueDatePicker v-model="date" :format-locale="ja" format="E" />
</template>

<script setup>
import { ref } from 'vue';
import { ja } from 'date-fns/locale';

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

select-text

Select text label in the action row

• Type: string
• Default: 'Select'

Code Example

<template>
    <VueDatePicker v-model="date" select-text="Pick" />
</template>

<script setup>
import { ref } from 'vue';

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

cancel-text

Cancel text label in the action row

• Type: string
• Default: 'Cancel'

Code Example

<template>
    <VueDatePicker v-model="date" cancel-text="Close" />
</template>

<script setup>
import { ref } from 'vue';

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

now-button-label

Change the text for now button

• Type: string
• Default: 'Now'

Code Example

<template>
    <VueDatePicker v-model="date" :action-row="{ showNow: true }" now-button-label="Current" />
</template>

<script setup>
import { ref } from 'vue';

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

week-num-name

Sets the label for the week numbers column

• Type: string
• Default: 'W'

Code Example

<template>
    <VueDatePicker v-model="date" week-numbers="iso" week-num-name="We" />
</template>

<script setup>
import { ref } from 'vue';

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

aria-labels

Customize the language of the HTML aria-labels for localized accessibility

• Type

interface AriaLabels {
  toggleOverlay?: string;
  menu?: string;
  input?: string;
  calendarWrap?: string;
  calendarDays?: string;
  openTimePicker?: string;
  closeTimePicker?: string;
  incrementValue?: (type: 'hours' | 'minutes' | 'seconds') => string;
  decrementValue?: (type: 'hours' | 'minutes' | 'seconds') => string;
  openTpOverlay?: (type: 'hours' | 'minutes' | 'seconds') => string;
  amPmButton?: string;
  openYearsOverlay?: string;
  openMonthsOverlay?: string;
  nextMonth?: string;
  prevMonth?: string;
  nextYear: string;
  prevYear: string;
  day?: ({value}: {value: Date}) => string;
  weekDay?: (day: number) => string;
}

• Default: {}

Code Example

<template>
    <VueDatePicker v-model="date" :aria-labels="ariaLabels" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref();
const ariaLabels = ref({ menu: 'Some custom menu label' })
</script>

day-names

Provide custom labels for day names in the calendar header

Note

Make sure that provided array has a length of 7

• Type: ((lang: string, weekStart: number) => string[]) | string[]
• Default: null;

Code Example

<template>
    <VueDatePicker v-model="date" :day-names="['1', '2', '3', '4', '5', '6', '7']" />
</template>

<script setup>
import { ref } from 'vue';

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