JavaScript, jQuery로 오늘 날짜와 요일 구하기

1. 순수 JavaScript로 날짜와 요일 구하기

순수 JavaScript만으로 오늘 날짜와 요일을 구하는 방법은 매우 간단합니다. 아래 코드는 2025-01-15 (수) 형식으로 날짜를 표시하는 예제입니다.

// 오늘 날짜 객체 생성
var today = new Date();

// 년, 월, 일 추출
var year = today.getFullYear();
var month = String(today.getMonth() + 1).padStart(2, '0'); // 0부터 시작하므로 +1
var day = String(today.getDate()).padStart(2, '0');

// 요일 배열 (0: 일요일 ~ 6: 토요일)
var weekDays = ['일', '월', '화', '수', '목', '금', '토'];
var weekDay = weekDays[today.getDay()];

// 결과 조합
var dateString = year + '-' + month + '-' + day + ' (' + weekDay + ')';
$('#todayDate').text(dateString); 
console.log(dateString); // 예: 2025-01-15 (수)

getMonth()는 0부터 시작하므로 실제 월을 얻으려면 1을 더해야 하고, padStart(2, '0')를 사용하면 한 자리 숫자를 두 자리로 만들어 깔끔한 형식을 유지할 수 있습니다.

 

2.  jQuery를 활용한 날짜 표시

jQuery를 사용하면 DOM 조작이 간편해지므로, 날짜 정보를 HTML 요소에 쉽게 표시할 수 있습니다. 특히 실시간으로 날짜를 업데이트하거나 여러 곳에 동시에 표시할 때 유용합니다.

$(document).ready(function() {
    // 날짜 포맷팅 함수
    function formatDate() {
        var today = new Date();
        var year = today.getFullYear();
        var month = String(today.getMonth() + 1).padStart(2, '0');
        var day = String(today.getDate()).padStart(2, '0');
        var weekDays = ['일', '월', '화', '수', '목', '금', '토'];
        var weekDay = weekDays[today.getDay()];
        
        return year + '년 ' + month + '월 ' + day + '일 ' + weekDay + '요일';
    }
    
    // HTML 요소에 날짜 표시
    $('#todayDate').text(formatDate());
    
    // 1초마다 업데이트 (실시간 시계 기능)
    setInterval(function() {
        $('#todayDate').text(formatDate());
    }, 1000);
});

위 코드는 #currentDate ID를 가진 요소에 날짜를 표시하며, setInterval을 사용해 매초마다 업데이트합니다. 실제 프로젝트에서는 필요에 따라 업데이트 주기를 조절하거나 제거할 수 있습니다.

 

 

3. 미지원 브라우저 대응 (IE11 등)

// padStart 미지원 브라우저 대응 (IE11 등)
function setTodayDateCompatible() {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var day = today.getDate();
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    var dayOfWeek = week[today.getDay()];
    
    // padStart 대신 전통적인 방법
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    
    var formatted = year + '-' + month + '-' + day + ' (' + dayOfWeek + ')';
    $('#todayDate').text(formatted);
}

 

 

4. 실전 활용 예제 및 팁

날짜와 요일 정보는 다양한 방식으로 활용할 수 있습니다. 예를 들어 특정 요일에만 특별한 스타일을 적용하거나, 주말과 평일을 구분하여 다른 메시지를 표시할 수 있습니다.

// 주말 체크 함수
function isWeekend() {
    var day = new Date().getDay();
    return day === 0 || day === 6; // 일요일(0) 또는 토요일(6)
}

// 요일별 메시지
function getDayMessage() {
    var weekDay = new Date().getDay();
    var messages = {
        0: '편안한 일요일 되세요! 😊',
        1: '활기찬 월요일 시작하세요! 💪',
        2: '화요일도 힘차게! 🔥',
        3: '수요일, 이번 주 절반 왔어요! 🎯',
        4: '목요일, 주말이 코앞! 🎉',
        5: '불금이에요! 🍺',
        6: '즐거운 토요일! 🌟'
    };
    return messages[weekDay];
}

// 날짜 차이 계산 (D-Day)
function getDday(targetDate) {
    var today = new Date();
    var target = new Date(targetDate);
    var diff = Math.ceil((target - today) / (1000 * 60 * 60 * 24));
    return diff > 0 ? 'D-' + diff : diff === 0 ? 'D-Day' : 'D+' + Math.abs(diff);
}

이러한 함수들을 조합하면 사용자 경험을 향상시키는 다양한 기능을 구현할 수 있습니다. 헤어짱몰과 같은 예약 시스템에서는 영업일 계산, 예약 가능 날짜 표시, D-Day 카운트다운 등에 활용할 수 있어 실용성이 높습니다.