如何使用Angular 1.3进一步格式化输入日期

时间:2015-09-07 10:51:16

标签: javascript angularjs forms date ionic

通过Ionic开发移动应用程序,我有这个HTML:

with t_view as
(
  select '6-21  6-21  6-21  6-21  6-21  6-21  6-21  ' as col from dual
  union all
  select '6-20  6-20  6-20  6-20  6-20  ' from dual
  union all
  select '6-9  6-9  6-9  6-9  6-9  6-9  6-9 6-9 ' from dual
)
SELECT LISTAGG(TO_CHAR(TRUNC(SYSDATE,'D')+level1,'Dy')||': '||
               REGEXP_SUBSTR(col,'[^ ]+',1,LEVEL1),', ')
        WITHIN GROUP (ORDER BY level1 )
from
(
SELECT  col,level level1
  FROM t_view
CONNECT BY REGEXP_SUBSTR(col,'[^ ]+',1,LEVEL) IS NOT NULL
   AND PRIOR col = col
   AND PRIOR sys_guid() IS NOT NULL
)
group by col;

我有这条指令旨在格式化输入中的呈现日期标签

<input type="date" ng-model="schedule.start"
                   name="startDate"
                   date-to-format />

但是,自Angular 1.3以来,格式化程序必须返回.directive('dateToFormat', function ($filter) { return { restrict: 'A', require: 'ngModel', link: function (scope, el, attrs, ctrl) { ctrl.$parsers.push(function (data) { return data; }); ctrl.$formatters.push(function (data) { return $filter('date')(data, 'EEE dd MMMM yyyy'); // error => filter returns a string, not a date object }); } }; }); 对象而不是等效字符串。

使用此指令的典型错误:

Date

如何使用Angular 1.3进一步格式化日期?
如果我将Expected `mon. 07 september 2015` to be a date. 包裹在$filter附近,我会丢失自定义格式...

Plunkr再现问题:http://plnkr.co/edit/eMIHWjtwHSPLxBBYxYu9?p=preview

1 个答案:

答案 0 :(得分:-1)

在这种情况下,最好使用<input type="text" />代替date以获得更好的浏览器兼容性。它还可以防止Angular强制该值为Date。您仍然可以在自定义指令中使用自定义解析器和格式化程序。

.directive('dateToFormat', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, el, attrs, ctrl) {
            ctrl.$parsers.push(function (data) {
                return new Date(data); // Maybe use some parsing libraries.
            });
            ctrl.$formatters.push(function (data) {
                return $filter('date')(data, 'EEE dd MMMM yyyy');
                // Now you can return strings as you like!
            });
        }
    };
});