Vue DatepickerFormatting
Format options for the value displayed in the input or preview
Info
- If you use the component in the browser
<script>tag, make sure to pass multi-word props with-, for example,previewFormataspreview-formatand so on
format
Format the value of the date(s) in the input field. Formatting is done automatically via provided string format. However, you can override the default format by providing a custom formatter function
- Type:
string | ((date: Date) => string) | ((dates: Date[]) => string); - Default:
- Single picker:
'MM/dd/yyyy HH:mm' - Range picker:
'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm' - Month picker:
'MM/yyyy' - Time picker:
'HH:mm' - Time picker range:
'HH:mm - HH:mm'
- Single picker:
Info
If is-24 prop is set to false, hours format will be changed to 'hh:mm aa'
For additional information on how to pass custom string format you can check Unicode tokens
Code Example
vue
<template>
<VueDatePicker v-model="date" :format="format" />
</template>
<script setup>
// Example using a custom format function
import { ref } from 'vue';
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
</script><template>
<VueDatePicker v-model="date" :format="format" />
</template>
<script setup>
// Example using a custom format function
import { ref } from 'vue';
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
</script>preview-format
Format the value of the date(s) in the action row
- Type:
string | ((date: Date) => string) | ((dates: Date[]) => string); - Default:
null
Same configuration as in format prop
Note: If not provided, it will auto inherit data from the format prop
Code Example
vue
<template>
<VueDatePicker v-model="date" :preview-format="format" />
</template>
<script setup>
// Example using a custom format function
import { ref } from 'vue';
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
</script><template>
<VueDatePicker v-model="date" :preview-format="format" />
</template>
<script setup>
// Example using a custom format function
import { ref } from 'vue';
const date = ref(new Date());
// In case of a range picker, you'll receive [Date, Date]
const format = (date) => {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `Selected date is ${day}/${month}/${year}`;
}
</script>month-name-format
Set the month name format
- Type:
'short' | 'long' - Default:
'short'
Code Example
vue
<template>
<VueDatePicker v-model="date" month-name-format="long" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script><template>
<VueDatePicker v-model="date" month-name-format="long" />
</template>
<script setup>
import { ref } from 'vue';
const date = ref(new Date());
</script>