Using format doesn't override the previous formatting

[BStojanoska]

Describe the bug When I use the prop format, it does not override the previous formatting. What I've noticed too, is that it's making duplicate preview dates too in the calendar.

To Reproduce Steps to reproduce the behavior:

<Datepicker
    v-model="range"
    range
    :partial-range="false"
    :enable-time-picker="false"
    :format="dateFormat"
    :min-date="minCalendarDate"
    placeholder="Select date"
  />

const dateFormat = ref();
...
dateFormat.value = `${day}/${month}/${year} - ${day2}/${month2}/${year2}`;

Expected behavior To override the display value as described in here: https://vue3datepicker.com/api/props/#format

Screenshots

Desktop (please complete the following information):

• OS: PopOs 21.10
• Browser Vivaldi (chromium based)
• Version 5.1

Additional context Add any other context about the problem here.

[Jasenkoo]

@BStojanoska

Are you using a custom function to format, or passing a format string?

[BStojanoska]

@Jasenkoo I'm just passing a formatted string (basically the return statement from the docs). I was using the function as described in the docs, but that wouldn't work too. Can the problem be that I'm instantiating the var as a ref beforehand?

[Jasenkoo]

@BStojanoska

If you use it like that, it is not a valid format. For string, it uses the date-fns format function, so it needs to have valid characters.

To have the date formatted like this

`${day}/${month}/${year} - ${day2}/${month2}/${year2}`;

you would pass something like this:

dateFormat.value = 'dd/MM/yyyy' // or just d/M/yyyy if you don't want the 0 for the value < 10

It will format both dates in the range like that, and add auto delimiter -, no need to target both.

For function formatting, you need to pass a function.

<template>
    <Datepicker
        v-model="range"
        range
        :partial-range="false"
        :enable-time-picker="false"
        :format="dateFormat"
        :min-date="minCalendarDate"
        placeholder="Select date"
  />
</template>

<script>
    export default {
       setup() {
           const dateFomat = (dates) => {
                // --- format the dates array ---
                // function must return the formatted value
                return  `${day}/${month}/${year} - ${day2}/${month2}/${year2}`;
            } 

          return {
              dateFomat 
          }
       }
    }
</script>

[BStojanoska]

This was really simple, thanks @Jasenkoo! I just omitted using ref(), used it as const dateFormat = 'dd/MM/yyyy.