Astrian/datenel-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance month availability checks in SingleDatePicker component

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-24 14:35:27 +11:00
parent 13a55d7eda
commit 84e8f62ec3
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/SingleDatePicker.vue
View File

@ -115,7 +115,13 @@
if (currentYear.value < 100) currentYear.value = parseInt(`20${currentYear.value}`) if (currentYear.value < 100) currentYear.value = parseInt(`20${currentYear.value}`)
} }
function monthNotAvailable() { function monthNotAvailable(month: number): boolean {
// When the last day of a month not inside the range of available dates
const lastDayOfMonth = new Date(currentYear.value, month + 1, 0)
if (availableRangeStart.value && lastDayOfMonth < availableRangeStart.value) return true
// When the first day of a month not inside the range of available dates
const firstDayOfMonth = new Date(currentYear.value, month, 1)
if (availableRangeEnd.value && firstDayOfMonth > availableRangeEnd.value) return true
return false return false
} }
@ -185,15 +191,15 @@
<div class='__datenel_month-selector-body'> <div class='__datenel_month-selector-body'>
<button <button
v-for="(_, index) in 12" v-for="(_, index) in 12"
:class="`__datenel_item ${monthNotAvailable() && '__datenel_not-available'}`" :class="`__datenel_item ${monthNotAvailable(index) && '__datenel_not-available'} ${currentMonth === index && '__datenel_active'}`"
key={index} key={index}
@click="() => { @click="() => {
currentMonth = index currentMonth = index
selectMonth = false selectMonth = false
}" }"
:aria-label="`Go to ${new Date(currentYear, index).toLocaleString(localization, { month: 'long' })} of the year ${currentYear}`" :aria-label="`Go to ${new Date(currentYear, index).toLocaleString(localization, { month: 'long' })} of the year ${currentYear}`"
:disabled="monthNotAvailable()" :disabled="monthNotAvailable(index)"
:aria-hidden="monthNotAvailable()" :aria-hidden="monthNotAvailable(index)"
> >
{{new Date(currentYear, index).toLocaleString(localization, { month: 'long' })}} {{new Date(currentYear, index).toLocaleString(localization, { month: 'long' })}}
</button> </button>