I have created buttons to select different dates (one for tomorrow and one for next week) with a function that calculates only business days. The 'tomorrow' button should display either 'Tomorrow' or 'Monday', while the 'week' button should show 'in 7 days', 'in 8 days', or 'in 9 days' depending on the current day of the week.
Here are the two buttons:
<v-btn
:value="dates[0]"
>
{{ buttonText }}
</v-btn>
<v-btn
:value="dates[1]"
>
{{ buttonText }}
</v-btn>
This is the computed function I used to calculate the postponed dates, which is functioning correctly:
postponeDays(): DateTime[] {
const today = DateTime.local()
return [
onlyBusinessDays(today, 1),
onlyBusinessDays(today, 7),
]
},
The implementation of the `onlyBusinessDays` function is as follows:
export const onlyBusinessDays = (date: DateTime, nrOfDays: number): DateTime => {
const d = date.startOf('day').plus({ days: nrOfDays })
const daysToAdd = d.weekday === 6 ? 2 : d.weekday === 7 ? 1 : 0
return d.plus({ days: daysToAdd })
}
Now, here's where I'm struggling - the computed function to determine the button text:
buttonText(): DateTime | string {
if (!this.dates[1]) {
if (DateTime.local().plus({ days: 7 }).hasSame(this.dates[1], 'day')) {
return 'in 7 days'
}
if (DateTime.local().plus({ days: 8 }).hasSame(this.dates[1], 'day')) {
return 'in 8 days'
} else return 'in 9 days'
} else {
if (DateTime.local().plus({ days: 1 }).hasSame(this.dates[0], 'day')) {
return 'Tomorrow'
} else return 'Monday'
}
},
I've attempted different approaches to this computed function, but I keep getting the same text for both buttons. It's puzzling because the postpone function for obtaining the correct dates is working flawlessly. Can anyone identify what I might be doing incorrectly? :)