如何使用ng-model格式化日期？

Question

我有一个输入定义为

<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

哪个被装配在页面的其他地方显示:

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

当页面加载时,出生日期很好地格式化为类似的东西Dec 22, 2009.然而,当我看到我<input>的内部时,它显示为Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)我猜是JS如何将Date对象呈现为字符串.

首先,我怎么告诉角度展现在日期<input>,就像这样12/22/2009？我似乎无法|filters在ng-model属性中应用.

其次,只要我编辑日期,即使保持原始格式,我的其他文本(内部<td>)似乎|date不再应用过滤器; 它突然改变格式以匹配输入文本框的格式.|date每次模型更改时,如何应用过滤器？

---

相关问题:

• 如何让我的指令只在onchange上启动？
• 如何访问指令中的参数？

Answer 1

使用表单的自定义验证http://docs.angularjs.org/guide/forms演示:http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX？p = preview

指令使用formaters和解析器和MomentJS)

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

Answer 2

这是非常方便的指令angular-datetime.你可以像这样使用它:

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

它还为您的输入添加掩码并执行验证.

Answer 3

我创建了一个简单的指令,使标准input[type="date"]表单元素能够与AngularJS~1.2.16一起正常工作.

请看这里:https: //github.com/betsol/angular-input-date

这是演示:http: //jsfiddle.net/F2LcY/1/

Answer 4

由于您使用了datepicker作为类,我假设您使用的是Jquery日期选择器或类似的东西.

有一种方法可以在不使用moment.js的情况下完成您的预期,纯粹只使用datepicker和angularjs指令.

我在这个小提琴里给了一个例子

摘录自这里的小提琴:

1. Datepicker具有不同的格式,并且angularjs格式不同,需要找到适当的匹配,以便在控件中预选日期,并且在绑定ng模型时也在输入字段中填充日期.以下格式等同于'mediumDate'AngularJS的格式.

   $(element).find(".datepicker")
             .datepicker({
                dateFormat: 'M d, yy'
             }); 
   

2. 日期输入指令需要有一个临时字符串变量来表示人类可读的日期形式.

3. 刷新页面的不同部分应该通过事件发生,比如$broadcast和$on.

4. 在ng-model中也可以使用过滤器以人类可读的形式表示日期,但是使用临时模型变量.

   $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');
   

Answer 5

我正在使用jquery datepicker来选择日期.我的指令读取日期并将其转换为json日期格式(以毫秒为单位)存储在ng-model数据中,同时显示格式化日期.如果ng-model具有json日期(以毫秒为单位),我的格式化程序以我的格式显示为jquery datepicker.

Html代码:

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

角度指令:

myModule.directive('jqdatepicker', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());            
                    scope.$apply();
                }
            });
            ngModelCtrl.$formatters.unshift(function(v) {
            return $filter('date')(v,'dd/MM/yyyy'); 
            });

        }
    };
});

Answer 6

我使用以下指令使我和大多数用户非常高兴!它使用片刻进行解析和格式化.它看起来有点像前面提到的SunnyShah那个.

angular.module('app.directives')

.directive('appDatetime', function ($window) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var moment = $window.moment;

            ngModel.$formatters.push(formatter);
            ngModel.$parsers.push(parser);

            element.on('change', function (e) {
                var element = e.target;
                element.value = formatter(ngModel.$modelValue);
            });

            function parser(value) {
                var m = moment(value);
                var valid = m.isValid();
                ngModel.$setValidity('datetime', valid);
                if (valid) return m.valueOf();
                else return value;
            }

            function formatter(value) {
                var m = moment(value);
                var valid = m.isValid();
                if (valid) return m.format("LLLL");
                else return value;

            }

        } //link
    };

}); //appDatetime

在我的形式我使用它像这样:

<label>begin: <input type="text" ng-model="doc.begin" app-datetime required /></label>
<label>end: <input type="text" ng-model="doc.end" app-datetime required /></label>

这将把时间戳(自1970年以来的毫秒)绑定到doc.begin和doc.end.