jQuery 날짜 메소드 (주간 달력 만들기; date method)

Photo by Behnam Norouzi on Unsplash

jQuery 날짜 메소드

$(document).ready(function(){
    var now = new Date();
    $("p").eq(0).text(now); //전체

    var year=now.getFullYear();//연도
    $("p").eq(1).text(year); 

    var month=now.getMonth()+1;//월
    $("p").eq(2).text(month);

    var date=now.getDate();//일
    $("p").eq(3).text(date);

    var day=now.getDay();//요일
    $("p").eq(4).text(day);

    var hr=now.getHours();//시간
    $("p").eq(5).text(hr);

    var min=now.getMinutes();//분
    $("p").eq(6).text(min);

    var sec=now.getSeconds();//초
    $("p").eq(7).text(sec);
  });
//출처: https://ga-you-ni.tistory.com/129 [개발자 성장 일기:티스토리]

요일 문자열 구하기

function getDate(){ //날짜문자열 형식은 자유로운 편
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    var dayOfWeek = week[new Date().getDay()];
    return dayOfWeek;
}
//출처: https://wook-dragon.tistory.com/6 [욱드래곤의 우당탕탕 코딩일기:티스토리]

주간 달력 만들기

첫 날짜가 이틀전 부터 표기되는 주간 달력(요일, 날짜)

// 주간 달력, 첫번째 당일 2일전
for (n = 0; n <= 6; n++) {
    var date_no = new Date().getDay(); // 기본 날짜 메소드(new Date().getDay();)
    /* 요일 순환; 0 = 일, 6 = 토*/
    var date_cc = date_no + n - 2; // - "시작 날짜 입력; 당일 = 0"
    if (date_cc >= 7) {/* 토요일 = 6을 넘길때 일요일 = 0으로 */
        var date_cc = date_cc - 7;
    }else if (date_cc <= -1) {
        var date_cc = date_cc + 7;
    }
    if (date_cc == 0){$(".week li").eq(n).css({"color":"#f00"})} /*일요일 빨간색*/
    console.log(date_cc, "0 = 일", new Date().getDay());

    function getDate() { //날짜 문자열;
        var week = ['일', '월', '화', '수', '목', '금', '토']; //변경 가능
        var dayOfWeek = week[date_cc];
        return dayOfWeek;
    }

주간달력(주일)

일요일부터 표기되는 달력 (날짜 정보)

var n;
var today = new Date().getDate();
var CDate = new Date(); 
var date_no = new Date().getDay(); //날짜 순번; 1번째 일요일
var prevLast = new Date(CDate.getFullYear(), CDate.getMonth(), 0).getDate(); //지난 달의 마지막 날 
var thisLast = new Date(CDate.getFullYear(), CDate.getMonth() + 1, 0).getDate(); //이번 달의 마지막 날
for (n = 0; n <= 6; n++) {
    var day_list = today - date_no + n;//n번째 금일 날짜 - 요일 순번 + n번째 li;
    if(day_list <= 0){ var day_list = day_list + prevLast //전월 날짜
    }else if (day_list > thisLast ) {
        var day_list = day_list - thisLast; // 다음달 시작
    }
    $(".date li").eq(n).text(day_list);
}

자바스크립트 연산자, 명령어; new, return

• new

  • new라는 기호는 자바스크립트의 고유의 예약어이며 고유의 연산자(operator) 입니다.
  • 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다

• return
  MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.'라고 되어있다.

  • 함수 중단
  • 주어진 값을 함수 호출 지점으로 반환
  • 함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환하는데, 이때 값을 명시하지 않으면 undefined를 반환한다.

출처)
new- https://lts0606.tistory.com/448
return - https://seoramyeon.tistory.com/20