AngularJS와 HTML5 날짜 입력값: Firefox에서 읽기 쉬운 날짜 값 표시하는 방법

HTML5 날짜 입력과 AngularJS의 연동

<input> 요소에 type="date" 속성을 지정하면 사용자가 텍스트 상자에 직접 입력하거나 날짜 선택기(date picker)를 이용해 날짜를 입력할 수 있습니다. AngularJS의 ng-model 디렉티브는 애플리케이션 데이터 값을 HTML 입력 컨트롤에 바인딩하는 역할을 담당합니다.

Firefox의 날짜 입력 미지원 문제

그러나 Firefox는 현재 type="date"를 완전히 지원하지 않으며, 입력된 모든 값을 문자열(string)로 변환해 버립니다. 실제 개발 환경에서는 문자열이 아니라 진짜 Date 객체로 날짜를 다루어야 하는 경우가 많기 때문에 이는 곧바로 문제가 됩니다.

해결 방법: 별도 변수를 만들고 $watch로 연결하기

이 문제를 해결하려면 날짜 입력 필드와 바인딩할 별도의 변수를 하나 더 생성한 뒤, 두 변수를 서로 연결(link)해 주면 됩니다. 아래 코드를 참고하세요.

<input type = "date" ng-model = "realdate" />

function MainCtrl($scope, dateFilter) {
    $scope.date = new Date();
    $scope.$watch('date', function (date){
        $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
    });
    $scope.$watch('realdate', function (realdate){
        $scope.date = new Date(realdate);
    });
}

코드 동작 원리

• $scope.date — 실제 JavaScript Date 객체를 보관하는 변수입니다.
• $scope.realdate — 화면의 날짜 입력 필드(type="date")와 바인딩되는 변수입니다.
• 첫 번째 $watch — date 값이 변경되면 dateFilter를 사용해 'yyyy-MM-dd' 형식의 문자열로 변환하여 dateString에 저장합니다.
• 두 번째 $watch — 사용자가 날짜 입력 필드의 값을 변경하면 해당 문자열을 다시 Date 객체로 변환해 date에 반영합니다.

이처럼 양방향 감시($watch)와 형식 변환을 조합하면, type="date"를 완전히 지원하지 않는 브라우저에서도 사용자에게는 읽기 쉬운 날짜 형식을 보여주면서 내부 로직에서는 Date 객체를 그대로 유지할 수 있습니다.