[Jquery] moment를 이용한 날짜(생년월일) 선택하는 드롭다운 생성하기
외부 라이브러리 moment는 기본적으로 jqeury가 존재한다는 전제하에 동작하는 라이브러리이다.
(Jquery 다운로드 링크는 잡다한 정리노트의 'Jqery 끄적노트' 게시글을 참고해주기 바란다.)
moment.js 다운로드
Moment.js | Home
Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"
momentjs.com
moment.js를 이용한 날짜 선택창이란 주로, 회원가입 페이지에 많이 보이는 '생년 월일' 을 선택하는 드롭다운 메뉴를 의미한다.
직접 예제를 통해 만들어보겠다.
1) html을 통해 뼈대 생성
<head>
//제작을 위한 필수 라이브러리
<script src="jquery-3.7.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을 통해 뼈대를 생성하고 옵션을 선택하려고 하지만 값이 존재하지 않는다.
옵션을 선택하기 위해선 각 옵션의 값을 해당하는 id 포지션에 추가해줘야한다. ( ex) id="myYear" 등)
2) '생년 월'을 선택하기 위한 함수를 생성한다.
createYearMonth();//스크립트의 시작부분에 1회 함수를 호출
//생년, 월을 생성하기
function createYearMonth(){
let cYear = moment().year() //현재년도를 나타냄(2024)
//부모.append(자식)
//자식.appendTo(부모)
//가장 처음 지정될 값을 지정함. 여기서는 option의 기본 값을 선택으로 설정함
$("#myYear").append($("<option>").text("선택").attr("value", "선택"));
//현재년도 2024년에서 -100을 한 값부터 현재 년도까지의 값을 option에 추가함
//1924~2024년이 선택가능
for(y=cYear-100; y<=cYear; y++){
$("#myYear").append($("<option>").val(y).text(y+"년"));
}
//가장 처음 지정될 값을 지정함. 여기서는 option의 기본 값을 선택으로 설정함
$("#myMonth").append($("<option>").text("선택").attr("value", "선택"));
// 1~12월의 값을 id=myMonth에 추가
for(let month= 1; month<=12; month++){
// 월을 두 자릿수 형태로 만들어준다 예: '01', '02', ..., '12'
let mValue = month < 10 ? "0" + month: month;
$("#myMonth").append($("<option>").val(mValue).text(mValue +"월"));
}
여기서 '주의사항' 은 '년 월 일'의 데이터를 사용하기 위해서는 createYearMonth() 등의 함수를 스크립트의 시작 부분에서 호출하고 시작해야한다. 'Why?' 왜 스크립트의 시작부분에 함수를 호출하고 시작하는가에 대해선 이렇게 설명할 수 있다.
1. 사용자의 경험 개선 : 웹페이지가 처음 로드되는 시점부터 사용자가 보는 첫 화면의 모든 필드(브라우저 창) 내에 필요한 요소가 바로 표시되어야한다.(예 : 날짜 선택을 위한 드롭다운 메뉴를 즉시 제공함)
2. 동적 콘텐츠의 생성 : 해당 드롭다운은 현재 년도(2024)를 기준으로 과거 100년부터 현재 년도까지의 범위 내에서 년도를 선택할 수 있도록 하고, 1월~12월까지의 월을 선택할 수 있는 옵션을 동적으로 생성하여 제공한다. 사용자가 직접 데이터를 선택할 수 있다는 점은 보다 유동적인 상호작용을 가능하게 한다는 장점이 존재한다.
3. 초기 상태 설정(초기화) : createYearMonth (); 의 호출을 통해 년도와 월 선택에 대한 드롭다운을 초기화할 수 있다.
그리고 다시 해당 함수를 호출하여 선택된 년도와 월에 따라 해당 월에 대한 일수를 자동으로 생성함. 이런 초기화는 사용자가 추가적인 입력을 할 필요 없이 페이지에서 기본적인 날짜정보를 제공한다는 점에 의의를 둔다.
3) 앞에 선택한 년도와 월의 데이터를 가져와 해당 데이터를 기반으로 일자 선택 기능을 추가
function createDate(){
//id=myYaer에서 사용자가 선택한 년도 데이터 가져오기
let year = $("#myYear").val();
//id=myMonth에서 사용자가 선택한 월 데이터 가져오기
let month = $("#myMonth").val();
//정확한 계산을 위해 월(month)에서 1을 빼준다.(웹 상에서는 1~12로 표시되지만, moment.js에서는 0~11로 처리되기 때문)
let adjustedMonth = parseInt(month, 10)-1;
//endOf()메소드를 통해 앞에서 선택한 해당년도와 해당 월의 마지막 일을 반환
let endDay = moment(year+"-"+(adjustedMonth+1), "YYYY-MM").endOf("month").date();
$("#myDate").append($("<option>").text("선택").attr("value", "선택"));
for(day=1; day <= endDay; day++){
//일자를 두자릿수로 만들어줌 예: '01', '02'...'10'.. '31'
let dayValue = day < 10 ? "0" + day: day;
$("#myDate").append($("<option>").val(dayValue).text(dayValue +"일"));
}
}
이 부분에서는 몇 가지의 주의사항이 있다. 먼저 createYearMonth (); 의 방식처럼 function createYearMonth () 의 끝부분에 일자를 생성하는 함수를 호출해야하기 때문에 createDate(); 사용해서 함수를 호출해야한다.
그리고 사용자가 년도와 월을 변경 했을 때 'createDate()' 함수의 바깥에서 change 이벤트를 통해 해당 년도, 월에 맞는 일자를 출력해야하는데 이 동작은 이런 방식으로 표현할 수 있다.
사용자가 년과 월을 변경했을 때 해당 일자를 출력하기 위해서 change 이벤트가 발생함
$("#myYear, #myMonth").change(function(){
createDate();
});
//둘다 똑같은 동작을 하는 코드이다. 본인의 취향껏 선택해서 사용
// $("#myYear, #myMonth").change(createDate);
이렇게 change 이벤트를 추가하면 짜잔! 해당 년도의 월과 그에 맞는 일자를 선택할 수 있는 간단한 드롭다운의 구현이 완료됬다.
※ endOf() 메소드를 통해서 반환된 선택한 년 월에 대한 일자 데이터는 선택된 해당 년도의 1월달 일자에 맞춰져있으니 유의하기 바란다.
+ 추가 내용
adjustedMonth = parseInt(month, 10)-1; 에서 1을 빼는 이유는 사용자가 선택한 월을 프로그래밍에서 사용하는 월의 인덱스(0~11)로 변환하기 위함이다.
마찬가지로 moment(year+"-"+(adjustedMonth+1), "YYYY-MM").endOf("month").date();에서 다시 1을 더하는 이유 또한moment.js에 날짜를 문자열로 전달할 때, 실제 월을 나타내기 위해 1~12 사이의 값을 사용해야 하기 때문이다.