Vue DatepickerLocalization
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,formatLocaleasformat-localeand 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><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><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><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><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><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><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;
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;
}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;
}- 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><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><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>