AngularJS และ HTML5 Date Input: ทำให้ Firefox แสดงค่าวันที่อ่านง่าย

ปัญหา Firefox ไม่รองรับ input type="date"

Firefox จะแปลงค่าวันที่เป็นสตริง ทำให้ไม่ใช่ออบเจ็กต์ Date จริงๆ วิธีแก้คือสร้างตัวแปรกลางและ sync ระหว่างสองตัวแปร

โค้ดตัวอย่าง

<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);
    });
}

dateString ใช้สำหรับ binding กับ input ในขณะที่ date เก็บเป็นออบเจ็กต์ Date จริง