首页 > 代码库 > angular input输入框中使用filter格式化日期

angular input输入框中使用filter格式化日期

最近使用了angular日期选择器,不过需要把选中的日期输出到input输入框中,如果按照默认情况,显示的是时间戳形式的时间,不符合要求,需要把格式变成特定格式,但是input上ng-model上又不能直接使用filter,因此需要一种方法把这里显示的内容格式化。

网上寻找解决方案就是写个directive,具体实例代码如下:

JS

angular.module('dateRange',[]).directive('dateFormat', ['$filter',function($filter) {
    var dateFilter = $filter('date');
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {

            function formatter(value) {
                return dateFilter(value, 'yyyy-MM-dd'); //format
            }

            function parser() {
                return ctrl.$modelValue;
            }

            ctrl.$formatters.push(formatter);
            ctrl.$parsers.unshift(parser);

        }
    };
}]);


HTML

<input type="text" ng-model="start_date" date-format disabled="disabled">

显示效果如图,具体的格式化修改代码中的format即可。