feat: add AppDatePicker custom calendar component
This commit is contained in:
Your Name
359
src/components/AppDatePicker.vue
Normal file
359
src/components/AppDatePicker.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { Calendar, ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
interface Props {
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
placeholder: 'Select date',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const triggerRef = ref<HTMLButtonElement | null>(null)
|
||||
const panelRef = ref<HTMLDivElement | null>(null)
|
||||
const panelStyle = ref<Record<string, string>>({})
|
||||
|
||||
// The month/year currently displayed in the calendar
|
||||
const viewYear = ref(new Date().getFullYear())
|
||||
const viewMonth = ref(new Date().getMonth()) // 0-indexed
|
||||
|
||||
// ── Formatting ──────────────────────────────────────────────────────
|
||||
const displayText = computed(() => {
|
||||
if (!props.modelValue) return null
|
||||
const [y, m, d] = props.modelValue.split('-').map(Number)
|
||||
const date = new Date(y, m - 1, d)
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
|
||||
const viewMonthLabel = computed(() => {
|
||||
const date = new Date(viewYear.value, viewMonth.value, 1)
|
||||
return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
||||
})
|
||||
|
||||
// ── Today helpers ───────────────────────────────────────────────────
|
||||
function todayString(): string {
|
||||
const now = new Date()
|
||||
return formatDate(now.getFullYear(), now.getMonth(), now.getDate())
|
||||
}
|
||||
|
||||
function formatDate(y: number, m: number, d: number): string {
|
||||
const mm = String(m + 1).padStart(2, '0')
|
||||
const dd = String(d).padStart(2, '0')
|
||||
return `${y}-${mm}-${dd}`
|
||||
}
|
||||
|
||||
// ── Calendar grid ───────────────────────────────────────────────────
|
||||
interface DayCell {
|
||||
date: number
|
||||
month: number // 0-indexed
|
||||
year: number
|
||||
isCurrentMonth: boolean
|
||||
dateString: string
|
||||
}
|
||||
|
||||
const dayCells = computed<DayCell[]>(() => {
|
||||
const y = viewYear.value
|
||||
const m = viewMonth.value
|
||||
|
||||
// First day of the month (0=Sun, 1=Mon, ...)
|
||||
const firstDayOfWeek = new Date(y, m, 1).getDay()
|
||||
// Shift so Monday=0
|
||||
const startOffset = (firstDayOfWeek + 6) % 7
|
||||
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
const daysInPrevMonth = new Date(y, m, 0).getDate()
|
||||
|
||||
const cells: DayCell[] = []
|
||||
|
||||
// Previous month padding
|
||||
const prevMonth = m === 0 ? 11 : m - 1
|
||||
const prevYear = m === 0 ? y - 1 : y
|
||||
for (let i = startOffset - 1; i >= 0; i--) {
|
||||
const d = daysInPrevMonth - i
|
||||
cells.push({
|
||||
date: d,
|
||||
month: prevMonth,
|
||||
year: prevYear,
|
||||
isCurrentMonth: false,
|
||||
dateString: formatDate(prevYear, prevMonth, d),
|
||||
})
|
||||
}
|
||||
|
||||
// Current month days
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
cells.push({
|
||||
date: d,
|
||||
month: m,
|
||||
year: y,
|
||||
isCurrentMonth: true,
|
||||
dateString: formatDate(y, m, d),
|
||||
})
|
||||
}
|
||||
|
||||
// Next month padding (fill up to 42 cells = 6 rows)
|
||||
const nextMonth = m === 11 ? 0 : m + 1
|
||||
const nextYear = m === 11 ? y + 1 : y
|
||||
let nextDay = 1
|
||||
while (cells.length < 42) {
|
||||
cells.push({
|
||||
date: nextDay,
|
||||
month: nextMonth,
|
||||
year: nextYear,
|
||||
isCurrentMonth: false,
|
||||
dateString: formatDate(nextYear, nextMonth, nextDay),
|
||||
})
|
||||
nextDay++
|
||||
}
|
||||
|
||||
return cells
|
||||
})
|
||||
|
||||
const dayHeaders = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
|
||||
|
||||
// ── Positioning ─────────────────────────────────────────────────────
|
||||
function updatePosition() {
|
||||
if (!triggerRef.value) return
|
||||
const rect = triggerRef.value.getBoundingClientRect()
|
||||
const panelWidth = 280
|
||||
|
||||
let left = rect.left
|
||||
// Shift left if it would overflow the viewport right edge
|
||||
if (left + panelWidth > window.innerWidth) {
|
||||
left = window.innerWidth - panelWidth - 8
|
||||
}
|
||||
if (left < 0) left = 0
|
||||
|
||||
panelStyle.value = {
|
||||
position: 'fixed',
|
||||
top: `${rect.bottom + 4}px`,
|
||||
left: `${left}px`,
|
||||
width: `${panelWidth}px`,
|
||||
zIndex: '9999',
|
||||
}
|
||||
}
|
||||
|
||||
// ── Open / Close ────────────────────────────────────────────────────
|
||||
function toggle() {
|
||||
if (isOpen.value) {
|
||||
close()
|
||||
} else {
|
||||
open()
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
// Sync view to modelValue or today
|
||||
if (props.modelValue) {
|
||||
const [y, m] = props.modelValue.split('-').map(Number)
|
||||
viewYear.value = y
|
||||
viewMonth.value = m - 1
|
||||
} else {
|
||||
const now = new Date()
|
||||
viewYear.value = now.getFullYear()
|
||||
viewMonth.value = now.getMonth()
|
||||
}
|
||||
|
||||
isOpen.value = true
|
||||
updatePosition()
|
||||
|
||||
nextTick(() => {
|
||||
document.addEventListener('click', onClickOutside, true)
|
||||
document.addEventListener('scroll', onScrollOrResize, true)
|
||||
window.addEventListener('resize', onScrollOrResize)
|
||||
})
|
||||
}
|
||||
|
||||
function close() {
|
||||
isOpen.value = false
|
||||
document.removeEventListener('click', onClickOutside, true)
|
||||
document.removeEventListener('scroll', onScrollOrResize, true)
|
||||
window.removeEventListener('resize', onScrollOrResize)
|
||||
}
|
||||
|
||||
// ── Month navigation ────────────────────────────────────────────────
|
||||
function prevMonthNav() {
|
||||
if (viewMonth.value === 0) {
|
||||
viewMonth.value = 11
|
||||
viewYear.value--
|
||||
} else {
|
||||
viewMonth.value--
|
||||
}
|
||||
}
|
||||
|
||||
function nextMonthNav() {
|
||||
if (viewMonth.value === 11) {
|
||||
viewMonth.value = 0
|
||||
viewYear.value++
|
||||
} else {
|
||||
viewMonth.value++
|
||||
}
|
||||
}
|
||||
|
||||
// ── Selection ───────────────────────────────────────────────────────
|
||||
function selectDay(cell: DayCell) {
|
||||
if (!cell.isCurrentMonth) return
|
||||
emit('update:modelValue', cell.dateString)
|
||||
close()
|
||||
}
|
||||
|
||||
function selectToday() {
|
||||
emit('update:modelValue', todayString())
|
||||
close()
|
||||
}
|
||||
|
||||
// ── Event handlers ──────────────────────────────────────────────────
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
const target = e.target as Node
|
||||
if (
|
||||
triggerRef.value?.contains(target) ||
|
||||
panelRef.value?.contains(target)
|
||||
) {
|
||||
return
|
||||
}
|
||||
close()
|
||||
}
|
||||
|
||||
function onScrollOrResize() {
|
||||
if (isOpen.value) {
|
||||
updatePosition()
|
||||
}
|
||||
}
|
||||
|
||||
// ── Sync view when modelValue changes externally ────────────────────
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val && isOpen.value) {
|
||||
const [y, m] = val.split('-').map(Number)
|
||||
viewYear.value = y
|
||||
viewMonth.value = m - 1
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// ── Cleanup ─────────────────────────────────────────────────────────
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', onClickOutside, true)
|
||||
document.removeEventListener('scroll', onScrollOrResize, true)
|
||||
window.removeEventListener('resize', onScrollOrResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<!-- Trigger button -->
|
||||
<button
|
||||
ref="triggerRef"
|
||||
type="button"
|
||||
@click="toggle"
|
||||
class="w-full flex items-center justify-between gap-2 px-3 py-2 bg-bg-inset border border-border-subtle rounded-xl text-[0.8125rem] text-left cursor-pointer transition-colors"
|
||||
:style="
|
||||
isOpen
|
||||
? {
|
||||
borderColor: 'var(--color-accent)',
|
||||
boxShadow: '0 0 0 2px var(--color-accent-muted)',
|
||||
outline: 'none',
|
||||
}
|
||||
: {}
|
||||
"
|
||||
>
|
||||
<span
|
||||
:class="displayText ? 'text-text-primary' : 'text-text-tertiary'"
|
||||
class="truncate"
|
||||
>
|
||||
{{ displayText ?? placeholder }}
|
||||
</span>
|
||||
<Calendar
|
||||
class="w-4 h-4 text-text-secondary shrink-0"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Calendar popover -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
ref="panelRef"
|
||||
:style="panelStyle"
|
||||
class="bg-bg-surface border border-border-visible rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.4)] overflow-hidden animate-dropdown-enter"
|
||||
>
|
||||
<!-- Month/year header -->
|
||||
<div class="flex items-center justify-between px-3 py-2.5">
|
||||
<button
|
||||
type="button"
|
||||
@click="prevMonthNav"
|
||||
class="p-1 rounded-lg hover:bg-bg-elevated transition-colors cursor-pointer text-text-secondary hover:text-text-primary"
|
||||
>
|
||||
<ChevronLeft class="w-4 h-4" :stroke-width="2" />
|
||||
</button>
|
||||
<span class="text-[0.8125rem] font-medium text-text-primary select-none">
|
||||
{{ viewMonthLabel }}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@click="nextMonthNav"
|
||||
class="p-1 rounded-lg hover:bg-bg-elevated transition-colors cursor-pointer text-text-secondary hover:text-text-primary"
|
||||
>
|
||||
<ChevronRight class="w-4 h-4" :stroke-width="2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Day-of-week headers -->
|
||||
<div class="grid grid-cols-7 px-2">
|
||||
<div
|
||||
v-for="header in dayHeaders"
|
||||
:key="header"
|
||||
class="text-center text-[0.6875rem] font-medium text-text-tertiary py-1 select-none"
|
||||
>
|
||||
{{ header }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day grid -->
|
||||
<div class="grid grid-cols-7 px-2 pb-2">
|
||||
<button
|
||||
v-for="(cell, index) in dayCells"
|
||||
:key="index"
|
||||
type="button"
|
||||
:disabled="!cell.isCurrentMonth"
|
||||
@click="selectDay(cell)"
|
||||
class="relative flex items-center justify-center h-8 w-full text-[0.75rem] rounded-lg transition-colors select-none"
|
||||
:class="[
|
||||
!cell.isCurrentMonth
|
||||
? 'text-text-tertiary/40 cursor-default'
|
||||
: cell.dateString === modelValue
|
||||
? 'bg-accent text-bg-base font-medium cursor-pointer'
|
||||
: cell.dateString === todayString()
|
||||
? 'ring-1 ring-accent text-accent-text cursor-pointer hover:bg-bg-elevated'
|
||||
: 'text-text-primary cursor-pointer hover:bg-bg-elevated',
|
||||
]"
|
||||
>
|
||||
{{ cell.date }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Today shortcut -->
|
||||
<div class="border-t border-border-subtle px-3 py-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="selectToday"
|
||||
class="w-full text-center text-[0.75rem] text-accent-text hover:text-accent cursor-pointer transition-colors py-0.5"
|
||||
>
|
||||
Today
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user