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
asformat-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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
ts
interface AriaLabels {
toggleOverlay?: string;
menu?: string;
input?: 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;
clearInput?: string;
calendarIcon?: string;
timePicker?: string;
monthPicker: (overlay: boolean) => string;
yearPicker: (overlay: boolean) => string;
timeOverlay: (type: 'hours' | 'minutes' | 'seconds') => string;
}
- Default:
{}
Code Example
vue
<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
vue
<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>