Formatting

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, previewFormat as preview-format and 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'
  • Week picker 'RR-yyyy' | 'ww-yyyy' (depends on week numbering)

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

<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

<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

<template>
    <VueDatePicker v-model="date" month-name-format="long" />
</template>

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

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