File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="date-input-group ">
<select id="prdctnYear" v-model="localDateForm.year" class="year-select" @change="emitChanges">
<option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
</select>
<input type="text" id="prdctnMonth" placeholder="월" v-model="localDateForm.month" maxlength="2" @input="onlyNumberInput('month')" class="month-input">
<input type="text" id="prdctnDay" placeholder="일" v-model="localDateForm.day" maxlength="2" @input="onlyNumberInput('day')" class="day-input">
</div>
</template>
<script>
export default {
name: "PrdctnSelectComponent",
props: {
// 초기값 또는 부모에서 전달하는 날짜 객체
modelValue: {
type: Object,
default: () => ({
year: new Date().getFullYear(),
month: '',
day: ''
})
},
// 포맷팅된 날짜 문자열 (YYYYMMDD)
value: {
type: String,
default: ''
}
},
emits: ['update:modelValue', 'formatted-date'],
data() {
return {
// 내부적으로 사용할 로컬 데이터
localDateForm: {
year: this.modelValue.year || new Date().getFullYear(),
month: this.modelValue.month || '',
day: this.modelValue.day || ''
}
};
},
computed: {
// 년도 옵션 (현재부터 1970년까지)
yearOptions() {
const currentYear = new Date().getFullYear();
const years = [];
for (let year = currentYear; year >= 1970; year--) {
years.push(year);
}
return years;
},
// 날짜 포맷팅 (YYYYMMDD 형식)
formattedDate() {
const year = this.localDateForm.year || '';
const month = this.localDateForm.month || '00';
const day = this.localDateForm.day || '00';
if (!year) return '';
return `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}`;
}
},
watch: {
// 부모로부터 변경된 값 감지
modelValue: {
handler(newValue) {
// 참조 공유가 아닌 값 복사로 변경
this.localDateForm = {
year: newValue.year || new Date().getFullYear(),
month: newValue.month || '',
day: newValue.day || ''
};
},
deep: true,
immediate: true
},
// 외부에서 전달된 포맷팅된 날짜값 감지
value: {
handler(newValue) {
if (newValue && newValue !== this.formattedDate) {
this.parsePrdctnYear(newValue);
}
},
immediate: true
}
},
created() {
// 컴포넌트 생성 시 값이 있으면 파싱
if (this.value) {
this.parsePrdctnYear(this.value);
}
},
methods: {
// 값 변경 시 부모에게 전달
emitChanges() {
this.$emit('update:modelValue', { ...this.localDateForm });
this.$emit('formatted-date', this.formattedDate);
},
// 숫자만 입력 가능하도록 제한
onlyNumberInput(field) {
this.localDateForm[field] = this.localDateForm[field].replace(/[^0-9]/g, '');
// 월 입력 범위 제한 (1-12)
if (field === 'month' && this.localDateForm.month) {
const month = parseInt(this.localDateForm.month);
if (month > 12) this.localDateForm.month = '12';
if (month < 1) this.localDateForm.month = '01';
}
// 일 입력 범위 제한 (1-31)
if (field === 'day' && this.localDateForm.day) {
const day = parseInt(this.localDateForm.day);
if (day > 31) this.localDateForm.day = '31';
if (day < 1) this.localDateForm.day = '01';
}
// 값 변경 알림
this.emitChanges();
},
// 날짜 문자열 파싱 메서드
parsePrdctnYear(prdctnYear) {
if (!prdctnYear) {
this.localDateForm = {
year: new Date().getFullYear(),
month: '',
day: ''
};
this.emitChanges();
return;
}
const prdctnYearStr = String(prdctnYear);
if (prdctnYearStr.length === 4) {
// YYYY 형식인 경우
this.localDateForm = {
year: prdctnYearStr,
month: '',
day: ''
};
} else if (prdctnYearStr.length === 8) {
// YYYYMMDD 형식인 경우
const year = prdctnYearStr.substring(0, 4);
let month = prdctnYearStr.substring(4, 6);
month = month === '00' ? '' : month;
let day = prdctnYearStr.substring(6, 8);
day = day === '00' ? '' : day;
this.localDateForm = { year, month, day };
}
// 값 변경 알림
this.emitChanges();
}
}
};
</script>
<style scoped>
</style>