날짜 입력 박스에 오늘 날짜 표시하기

Javascript로 오늘 날짜를 표시할 때의 문제점

웹페이지 상에 구현되어 있는 날짜 입력 박스에 오늘 날짜를 표시하는 방법에 대해 알아보자.
일전, 데이터베이스 자료 검색을 위해서 시작날짜와 종료날짜를 선택할 수 있는 날짜 입력 박스를 웹페이지 상에 표시해야 할 일이 있었고, 아래와 같이 간단한 코드를 사용하였다.

<input type="date" id="start" name="search_start" onchange="value_reload()">
<input type="date" id="end" name="search_end" onchange="value_reload()">
 
<script>
     document.getElementById('start').valueAsDate = new Date();
     document.getElementById('end').valueAsDate = new Date();
</script>

위 코드의 출력결과는 아래와 같다. 즉, 시작날짜와 종료날짜를 오늘날짜로 표시하는게 목적이었다.

시작날짜와 종료날짜를 선택하여 원하는 자료를 검색하는데는 전혀 문제가 없었지만, 처음 HTML 페이지가 로드 되었을 때, 기본적으로 오늘 날짜를 표시하는 부분에 문제가 있었다. 즉, 오전 9시가 되기 전까지는 오늘 날짜가 아닌 어제 날짜가 날짜 입력 박스에 찍히고 있었던 것이다. 이 문제를 개선하여 날짜 입력 박스에 오늘 날짜를 올바르게 표시하기 위한 방법을 알아보자.

오늘 날짜를 제대로 표시하는 방법

이 문제를 해결하기 위해서 오랜 시간 삽질을 거듭한 결과, 다음과 같은 코딩이 문제를 해결해 줄 수 있는 것을 확인 하였다.

<input type="date" id="start" name="search_start" onchange="value_reload()">
<input type="date" id="end" name="search_end" onchange="value_reload()">
 
<script>
     var date1 = new Date();

     document.getElementById('start').valueAsDate = \
                   new Date(Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate()));
     document.getElementById('end').valueAsDate = \
                   new Date(Date.UTC(date1.getFullYear(), date1.getMonth(), date1.getDate()));
</script>

이 해법이 필요했던 누군가에게 유용하게 사용 되길 바라며 짧은 글을 마무리 한다.