지금까지 배운 jQuery와 moment를 활용하여 날짜 데이터를 자동 생성하는 프로그램을 만들어보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>12_날짜자동생성.html</title>
<script src="jquery-3.6.1.min.js"></script>
<script src="moment-with-locales.js"></script>
</head>
<body>
<h3>날짜 데이터 자동 생성</h3>
생년월일 :
<select id="myYear"></select>년
<select id="myMonth"></select>월
<select id="myDate"></select>일
</body>
</html>
년월일 각각 데이터를 추가하자
년과 월을 생성하는 함수를 만들고 이 함수 안에 일을 생성하는 함수를 만들어보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>12_날짜자동생성.html</title>
<script src="jquery-3.6.1.min.js"></script>
<script src="moment-with-locales.js"></script>
</head>
<body>
<h3>날짜 데이터 자동 생성</h3>
생년월일 :
<select id="myYear"></select>년
<select id="myMonth"></select>월
<select id="myDate"></select>일
<script>
createYearMonth(); //최초로 함수 한번만 호출
//년, 월 생성하기
function createYearMonth(){
//alert();
//1) 1월~12월 생성 후 추가
for (let i=1; i<=12; i++) {
//자식.appendTo(부모)
$("<option>").val(i).text(i).appendTo("#myMonth");
//$("#myMonth").append($("<option>").text(i).val(i)); 부모.append(자식)
}//for end
//2)현재년도 -5년 ~ 현재년도 +5년까지 출력
/*
let now = moment();
for (let y=5; y>=0; y--) {
$("<option>").val(now.year()-y).text(now.year()-y).appendTo("#myYear");
}
for (let y=1; y<=5; y++) {
$("<option>").val(now.year()+y).text(now.year()+y).appendTo("#myYear");
}
*/
let cYear = moment().year(); //현재년도 2022
for(y=cYear-5; y<=cYear+5; y++) {
//3)현재년도를 미리 selected
if(y==cYear) {
$("#myYear").append($("<option>").text(y).val(y).attr("selected", true)); //attr("selected", true) / prop("selected", true) / append($("<option selected>") 이렇게도 가능
} else {
$("#myYear").append($("<option>").text(y).val(y));
}//if end
}//for end
//4) '일' 생성하는 함수 호출
createDate();
}//createYearMonth() end
function createDate(){ //일 생성하기
//5)id=myYear에서 사용자가 선택한 년 가져오기
let year = $("#myYear").val();
//alert(year);
//6)id=myMonth에서 사용자가 선택한 월 가져오기
let month = $("#myMonth").val();
//alert(month);
//7)endOf() : 해당년도와 해당월의 마지막 일을 얻어옴
let endDay = moment(year+"-"+month).endOf("month").date();
//alert(endDay);
//8) '일' 추가
for (let d=1; d<=endDay; d++) {
$("#myDate").append($("<option>").text(d).val(d));
}
}//createDate() end
//9)사용자가 년, 월, 변경 시 (change이벤트 발생)
$("#myYear, #myMonth").change(createDate); //#myYear, #myMonth가 변하면 createDate 함수가 실행
//$("#myYear, #myMonth").change("createDate()"); old version
</script>
</body>
</html>그런데 여기서 문제가 하나 있다. 달을 변경하면 변경하기 전 달의 일자들이 그대로 남아있다.
일자들이 누적되지 않게 고쳐보자
년이나 달이 변경될 때 일자들을 초기화한 후 다시 해당 년도와 월의 일자들이 추가되게 하면 될 것이다.
$("#myDate").empty();
//8) '일' 추가
for (let d=1; d<=endDay; d++) {
$("#myDate").append($("<option>").text(d).val(d));
}
}//createDate() end일자를 추가하는 작업 위에 empty 함수를 통해 기존의 일자를 먼저 지우는 작업을 하였다. 이러면 위의 문제는 해결된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>12_날짜자동생성.html</title>
<script src="jquery-3.6.1.min.js"></script>
<script src="moment-with-locales.js"></script>
</head>
<body>
<h3>날짜 데이터 자동 생성</h3>
생년월일 :
<select id="myYear"></select>년
<select id="myMonth"></select>월
<select id="myDate"></select>일
<script>
createYearMonth(); //최초로 함수 한번만 호출
//년, 월 생성하기
function createYearMonth(){
//alert();
//1) 1월~12월 생성 후 추가
for (let i=1; i<=12; i++) {
//자식.appendTo(부모)
$("<option>").val(i).text(i).appendTo("#myMonth");
//$("#myMonth").append($("<option>").text(i).val(i)); 부모.append(자식)
}//for end
//2)현재년도 -5년 ~ 현재년도 +5년까지 출력
/*
let now = moment();
for (let y=5; y>=0; y--) {
$("<option>").val(now.year()-y).text(now.year()-y).appendTo("#myYear");
}
for (let y=1; y<=5; y++) {
$("<option>").val(now.year()+y).text(now.year()+y).appendTo("#myYear");
}
*/
let cYear = moment().year(); //현재년도 2022
for(y=cYear-5; y<=cYear+5; y++) {
//3)현재년도를 미리 selected
if(y==cYear) {
$("#myYear").append($("<option>").text(y).val(y).attr("selected", true)); //attr("selected", true) / prop("selected", true) / append($("<option selected>") 이렇게도 가능
} else {
$("#myYear").append($("<option>").text(y).val(y));
}//if end
}//for end
//4) '일' 생성하는 함수 호출
createDate();
}//createYearMonth() end
function createDate(){ //일 생성하기
//5)id=myYear에서 사용자가 선택한 년 가져오기
let year = $("#myYear").val();
//alert(year);
//6)id=myMonth에서 사용자가 선택한 월 가져오기
let month = $("#myMonth").val();
//alert(month);
//7)endOf() : 해당년도와 해당월의 마지막 일을 얻어옴
let endDay = moment(year+"-"+month).endOf("month").date();
//alert(endDay);
//10) 기존의 '일' 출력된 값을 지우기
$("#myDate").empty();
//8) '일' 추가
for (let d=1; d<=endDay; d++) {
$("#myDate").append($("<option>").text(d).val(d));
}
}//createDate() end
//9)사용자가 년, 월, 변경 시 (change이벤트 발생)
$("#myYear, #myMonth").change(createDate); //#myYear, #myMonth가 변하면 createDate 함수가 실행
//$("#myYear, #myMonth").change("createDate()"); old version
</script>
</body>
</html>날짜 데이터 자동 생성
생년월일 : 년 월 일
※ 참고
text() : 일반적인 요소의 문자열값을 얻어올때
val() : <input>, <select>, <textarea> 등 폼과 관련된 값(컨트롤 요소)을 얻어올때
