본문으로 바로가기

자바스크립트의 Date

category JavaScript 2018. 7. 10. 12:04
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


자바스크립트의 Date


자바스크립트의 Date 클래스에는 날짜 및 시간과 관련된 유용한 기능이 담겨 있습니다. Date 클래스는 실무에서 다음과 같은 경우에 유용하게 사용됩니다. 저 같은 경우에는 실제로 달력을 만들었어야 했는데(물론 퍼블은 제가 하지 않았습니다만..) 이 주제를공부하면서 많이 알게 되었습니다.


 메서드

 설명 

getDate() 

로컬 시간을 사용하여 일(월 기준) 반환 

getDay() 

로컬 시간을 사용하여 일(주 기준, 즉 요일)을 반환 

getFullYear() 

로컬 시간을 사용하여 연도를 반환 

getHours() 

로컬 시간을 사용하여 시간을 반환 

getMilliseconds()  

로컬 시간을 사용하여 밀리초를 반환

getMinutes() 

로컬 시간을 사용하여 분을 반환 

getMonth() 

로컬 시간을 사용하여 월을 반환 

getSeconds() 

로컬 시간을 사용하여 초를 반환 

getTime() 

1970년 1월 1일 00:00:00부터 현재시간 까지 경과한 시간을 밀리초로 반환  

getYear()

로컬 시간을 사용하여 연도 값을 반환. getFullYear() 사용을 권장

setDate() 

로컬 시간을 사용하여 일(월 기준)을 설정 

setFullYear() 

로컬 시간을 사용하여 연도를 설정 

setHours() 

로컬 시간을 사용하여 시간을 설정

setMilliseconds()

로컬 시간을 사용하여 밀리초를 설정

setMinutes() 

로컬 시간을 사용하여 분을 설정 

setMonth() 

로컬 시간을 사용하여 월을 설정 

setSeconds() 

로컬 시간을 사용하여 초를 설정 

setTime() 

날짜와 시간 값을 설정 

setYear() 

로컬시간을 사용하여 연도 값을 설정. setFullYear() 사용을 권장 





말씀드렸다시피 자바스크립트 Date를 사용하여 달력을 만들어보았는데 확실하게 이해할수 있었습니다. 아래에 자바스크립트로 달력을 만든 클래스를 첨부합니다.

/*
 * 요일은 0 ~ 6, 일요일 : 0, 토요일 : 6 
 * 달은 0 ~ 11, 1월 : 0, 12월 : 11
 */
 
var calendarUtil = function(date) {
    /**
     * 기본적인 셋팅
     * 월별 마지막 날짜
     * 윤년을 구해 윤년일 경우 2월의 마지막 달을 29로 변경
     */
    
    /** 
     * 개발 순서
     * 1. 입력된 달의 첫번째 요일을 구한다.
     * 2. 입력된 달의 마지막 일을 구한다.
     * 3. 한달에 몇 주인지 구한다.
     * 4. 달력의 왼쪽 또는 오른쪽을 클릭했을 경우 현재 년 월에 1달을 추가하거나 뺀다.
     */
    if(typeof(date) !== 'undefined')
    {
        date = date.split('/');
        date = new Date(date[0], date[1], 1);
    }
    else
    {
        var date = new Date();
    }
    
    var currentYear = date.getFullYear(); //getYear은 Deprecated 되었다.

    //월별 마지막 날을 입력한다.
    var monthLastArray = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

    //윤년일 경우 2월의 마지막 달을 29일로 설정한다.
    if(currentYear % 4 == 0 && (currentYear % 100 != 0 || currentYear % 400 == 0)) {
        monthLastArray[1] = 29;
    }
    
    //1. 입력된 달의 첫번째 요일을 구한다.
    date.setDate(1);
    var dayofweek = date.getDay();
    
    //2. 입력된 달의 마지막 일을 구한다.
    var currentMonth = date.getMonth();
    var lastDay = monthLastArray[currentMonth];
    
    //3. 한달이 몇 주인지 구한다.
    var monthWeek = Math.ceil((dayofweek + lastDay) / 7);
    
    //4. 달력의 왼쪽 또는 오른쪽을 클릭했을 경우 현재 년 월에 1달을 추가하거나 뺀다.
    //1달전으로 돌아 갈 경우
    var preDate = "";
    
    if(currentMonth == 0)
        preDate += (currentYear - 1) + "/" + 11 + "/" + 1;
    else
        preDate += currentYear + "/" + (currentMonth - 1) + "/" + 1;
    
    //1달뒤로 갈 경우
    var postDate = "";
    if(currentMonth == 11)
        postDate += (currentYear + 1) + "/" + 0 + "/" + 1;
    else
        postDate += currentYear + "/" + (currentMonth + 1 ) + "/" + 1;

    return {
        "currentYear" : currentYear, 
        "currentMonth" : currentMonth,
        "monthWeek" : monthWeek,
        "dayofweek" : dayofweek,
        //"lastDay" : lastDay,
        //"preDate" : preDate,
        //"postDate" : postDate,
        //"preLastDay" : monthLastArray[currentMonth - 1]
    };
}




'JavaScript' 카테고리의 다른 글

자바스크립트의 콜백(Callback)과 비동기  (0) 2018.07.11
자바스크립트의 Array  (0) 2018.07.11
자바스크립트의 String  (0) 2018.07.10
자바스크립트 타이머 함수  (0) 2018.07.07
자바스크립트의 Math  (0) 2018.07.07