在AngularJS中使用ng-model格式化日期

在AngularJS中，使用ng-model指令可以在表单控件中双向绑定数据模型。日期格式是我们经常需要处理的一种数据格式，在AngularJS中也提供了一些指令和过滤器来方便日期的格式化和显示。

使用ng-model格式化日期

我们可以使用ng-model指令来双向绑定一个日期对象，比如：

<input type="date" ng-model="myDate">

在这个例子中，我们使用了type="date"来告诉浏览器这个控件是一个日期输入框。ng-model指令将我们输入的日期值绑定到myDate变量上。需要注意的是，这里绑定的是一个Date类型的对象，而不是字符串。

控件的显示格式取决于浏览器和操作系统的差异，在某些情况下可能会显示为文本框，而不是日期选择框。

使用过滤器格式化日期

如果需要对日期进行特定的格式化，可以使用AngularJS提供的过滤器来完成。比如，我们可以使用date过滤器将日期格式化为字符串：

<p>{{ myDate | date:'yyyy-MM-dd' }}</p>

这个例子中，我们将myDate变量通过date过滤器格式化为yyyy-MM-dd格式的字符串。date过滤器还可以接受其他参数，比如时区和语言。更多参数可以查看官方文档。

自定义日期格式化指令

如果需要使用自定义的日期格式，可以通过定义一个指令来实现。下面是一个简单的例子：

app.directive('myDate', function($filter) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
            ngModelController.$formatters.push(function(value) {
                return $filter('date')(value, 'yyyy年MM月dd日');
            });
        }
    };
});

这个指令将myDate变量格式化为中文日期格式。在HTML中使用这个指令：

<input type="date" ng-model="myDate" my-date>

需要注意的是，这个指令依赖date过滤器，必须注入$filter服务来使用。

总结

在AngularJS中使用ng-model指令可以方便地双向绑定日期对象。使用date过滤器可以对日期进行格式化。如果需要使用自定义格式化，可以通过定义一个指令来实现。