datepicker 날짜 형식 변경 (MM월 DD일)

프로젝트 도중 체크인,체크아웃 날짜 값을 세션 스토리지에 넣어야 하는 상황이 왔다. 

한가지 내가 수정해줘야 하는 부분이 있었는데

 

 

지금 datepicker의 체크인, 체크아웃 값이 

이런 식으로 출력 된다

나는 이걸 00월 00일로 바꿔서 저장하려고 한다.

 

이유는 db랑 결제 jsp에 

이런 식으로 나오길 원하기 때문이다. 

 

 

참고로 내가 사용한 datepicker 코드는

$(function() {
    //input을 datepicker로 선언
    $("#datepicker1,#datepicker2").datepicker({
        dateFormat: 'yy-mm-dd' //달력 날짜 형태
        ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
        ,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
        ,changeYear: true //option값 년 선택 가능
        ,changeMonth: true //option값  월 선택 가능                
        ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
        ,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
        ,buttonImageOnly: true //버튼 이미지만 깔끔하게 보이게함
        ,buttonText: "선택" //버튼 호버 텍스트              
        ,yearSuffix: "년" //달력의 년도 부분 뒤 텍스트
        ,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
        ,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip
        ,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 텍스트
        ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 Tooltip
        ,minDate: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
        ,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)  
    });                    
    
    //초기값을 오늘 날짜로 설정해줘야 합니다.
    $('#datepicker1').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후) 
           
});

 

 

---

 

구글링을  해본 결과

 

 

첫 번째 방법

let startDate = $("#datepicker1").datepicker({format:'MM월 dd일'});

 

가장 코드도 간결하고 빨라서 이걸로 하고 싶었는데..

 

 

자꾸 이상한 값이 출력 됐다.

값이 [object Object]로 출력이 됐다.

JSON으로 출력이 되는거다.

왜 그런지 모르겠어서 몇 시간 찾아보다 시간이 없어 다른 방법을 선택했다.

 

 

 

두번째 방법

//출력값이 기존(Tue Mar 26....)으로 나오던 변수
startDate = new Date(document.getElementById("datepicker1").value);
endDate = new Date(document.getElementById("datepicker2").value);

//체크인 날짜
startMonth = ('0'+(startDate.getMonth()+1)).slice(-2);
startday = ('0'+startDate.getDate()).slice(-2);
startDate1 = startMonth+'월 ' +startday+'일';
	
//체크아웃 날짜
endMonth = ('0'+(endDate.getMonth()+1)).slice(-2);
endday = ('0'+endDate.getDate()).slice(-2);
endDate1 = endMonth+'월 ' +endday+'일';

(변수에 let을 안쓴 이유는 전역으로 이미 선언했다. 이건 그 밑에 코드를 가져온 것)

 

바로 하나하나 월, 일 값을 구해서 합쳐 출력하는 것이다.

이 방법은 손이 좀 가지만 결과가 바로 나왔다.

 

 

 

 

 

 

사실 예전에 간단하게 하는 방법을 찾았었는데 프로젝트 날려 먹는 바람에 까먹었다.

그 방법을 다시 찾게 된다면 블로그 내용을 수정하겠다.

 

 

나 처럼 한개의 문제로 하루를 날려먹는 사람이 적어지길 바라며..