Add date picker quick actions
This commit is contained in:
@@ -54,6 +54,18 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-2 px-4 pb-3">
|
||||
<button type="button" class="rounded-md border border-line px-3 py-2 text-sm font-bold active:bg-paper" @click="selectToday">
|
||||
오늘
|
||||
</button>
|
||||
<button type="button" class="rounded-md border border-line px-3 py-2 text-sm font-bold active:bg-paper" @click="showCurrentMonth">
|
||||
이번 달
|
||||
</button>
|
||||
<button type="button" class="rounded-md border border-line px-3 py-2 text-sm font-bold active:bg-paper" @click="showSelectedMonth">
|
||||
선택일
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 px-4 text-center text-xs font-bold text-muted">
|
||||
<span v-for="day in weekdays" :key="day" class="py-2">{{ day }}</span>
|
||||
</div>
|
||||
@@ -112,6 +124,19 @@ function moveMonth(amount: number) {
|
||||
calendarDate.value = addMonths(calendarDate.value, amount)
|
||||
}
|
||||
|
||||
function selectToday() {
|
||||
emit('update:modelValue', formatDateOnly())
|
||||
open.value = false
|
||||
}
|
||||
|
||||
function showCurrentMonth() {
|
||||
calendarDate.value = new Date()
|
||||
}
|
||||
|
||||
function showSelectedMonth() {
|
||||
calendarDate.value = parse(props.modelValue, 'yyyy-MM-dd', new Date())
|
||||
}
|
||||
|
||||
function dateValue(day: number) {
|
||||
return `${calendarYear.value}-${String(calendarMonth.value + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
@@ -65,3 +65,4 @@
|
||||
- 하단 네비게이션과 PC 사이드바 SVG 아이콘을 마스크 방식 대신 인라인 SVG 렌더링으로 변경해 네모 박스로 보이는 문제를 수정했다.
|
||||
- 내역, 통계, 자산 화면의 월 이동 UI를 공통 `MonthNavigator` 컴포넌트로 통일했다.
|
||||
- 통계와 자산 화면의 상단 헤더와 월 이동 영역을 분리해 페이지 간 날짜 조작 위치를 맞췄다.
|
||||
- 거래 입력/수정 날짜 선택 바텀시트에 `오늘`, `이번 달`, `선택일` 빠른 이동 버튼을 추가했다.
|
||||
|
||||
Reference in New Issue
Block a user