Angulrajsのng-gridで編集時にDatePickerを使おうとしてハマったのでメモ。

解決ネタは、http://blog.mitsuruog.info/2015/02/input-date-trouble-tips-in-angularjs.html

ng-gridでは、カラムの編集用のコンテンツをテンプレートとして設定できるので、columnDefsで

editableCellTemplate : '<input type="date" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-date-format="yyyy/MM/ddTHH:mm:ss"/>'

とテンプレートを定義すれば、HTML5の<input type="date" />でDatePickerが利用できるはず。ところが、datefmtがおかしいとかなんだかんだでエラーとなり、いい感じにDatePickerが利用できない。

「ng-grid datepicker」で検索すると、結構うまくいってない輩が質問飛ばしているが、テンプレートを定義すれば行けるぜ!的な回答ばかり(それやってダメなんだってば...^^;)

多分、うまくいくケースとそうでは無いケースがあるんだろうとググっていると、http://blog.mitsuruog.info/2015/02/input-date-trouble-tips-in-angularjs.html
に遭遇。

どうやら、「input[type=date]にセットするmodelはDate型でなければならない
」ってのが原因ということに気がついた。きっと、テストして回答してくれてる人は

    app.controller('costCtrl', function ($scope) {
        $scope.data = [
    { new Date(), '1', 'A' },
    { new Date(), '1', 'A' },
    ];

としてるんだよね。だから絶対うまくいく。オブジェクトをJSONシリアライズした結果を渡しているような場合は、日付は文字列になっちゃうために問題が発生していたわけ。

    app.controller('costCtrl', function ($scope) {
        $scope.data = [
    { '2014-03-18T23:05:45.477Z', '1', 'A' },
    { '2014-03-18T23:05:45.477Z', '1', 'A' },
    ];

結果、

        $scope.data = @Json.Serialize(Model.Items);
        angular.forEach($scope.data , function(data, i) {
            data.Date = new Date(data.Date);
        });

としたら、何の事はない以下のとおりのテンプレートで問題なくDatePickerが利用できた。

columnDefs: [
  { field: 'Date', displayName: '日付', width: 130, sortable: true, headerClass: 'text-center', editableCellTemplate: '<input type="date" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-date-format="yyyy/MM/ddTHH:mm:ss"/>', cellFilter: 'date:"yyyy/MM/dd"' },

ちょっと、カッコ悪いのでもう少し良い方法を考え中...