Closed BStojanoska closed 2 years ago
@BStojanoska
Are you using a custom function to format, or passing a format string?
@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?
@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>
This was really simple, thanks @Jasenkoo!
I just omitted using ref()
, used it as const dateFormat = 'dd/MM/yyyy
.
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:
Expected behavior To override the display value as described in here: https://vue3datepicker.com/api/props/#format
Screenshots![scrn](https://user-images.githubusercontent.com/10763904/159004627-083db51a-f131-4b7c-a4df-72ef3e3adbdf.png)
Desktop (please complete the following information):
Additional context Add any other context about the problem here.