54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper"
|
|
aria-label="이전 달"
|
|
@click="moveMonth(-1)"
|
|
>
|
|
<img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_left.svg" alt="">
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-md px-1 py-2 text-left font-extrabold active:bg-paper"
|
|
:class="labelMode === 'month' ? 'text-2xl' : 'text-xl'"
|
|
@click="monthPickerOpen = true"
|
|
>
|
|
{{ displayMonth }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="flex h-9 w-9 items-center justify-center rounded-md active:bg-paper"
|
|
aria-label="다음 달"
|
|
@click="moveMonth(1)"
|
|
>
|
|
<img class="h-6 w-6 opacity-70" src="~/assets/icons/keyboard_arrow_right.svg" alt="">
|
|
</button>
|
|
</div>
|
|
|
|
<BottomSheetMonthPicker v-model="model" v-model:open="monthPickerOpen" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { addMonths, format, parse } from 'date-fns'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
labelMode?: 'month' | 'yearMonth'
|
|
}>(), {
|
|
labelMode: 'yearMonth'
|
|
})
|
|
|
|
const model = defineModel<string>({ required: true })
|
|
const monthPickerOpen = ref(false)
|
|
|
|
const displayMonth = computed(() => {
|
|
const date = parse(model.value, 'yyyy-MM', new Date())
|
|
return props.labelMode === 'month' ? format(date, 'M월') : format(date, 'yyyy년 M월')
|
|
})
|
|
|
|
function moveMonth(amount: number) {
|
|
const date = parse(model.value, 'yyyy-MM', new Date())
|
|
model.value = format(addMonths(date, amount), 'yyyy-MM')
|
|
}
|
|
</script>
|