Question

为了提出问题，我准备了简化的例子：

...
<input type="date" ng-model="selectedMoment" />
...
<script>
 angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.selectedMoment = moment();
        //...more code...
     }]);
</script>

基本上，我只需要模型之间的约束（moment.js＆＃39; s date）＆amp;视图（输入[日期]字段）正常工作 - 更新模型时更新日期输入，反之亦然。显然，尝试上面的例子会给你带来错误，即模型不属于Date类型。

这就是为什么我要问经验丰富的AngularJs开发人员，我该如何正确实现这种绑定？

任何建议都表示赞赏。

Answer 1

创建一个指令，该指令解析日期和时刻的格式。

下面的基本示例（将通过错误处理进行扩展）

myApp.directive('momentInput', function () {
    return {
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$parsers.push(function(viewValue) {
                return moment(viewValue);
            });
            ctrl.$formatters.push(function(modelValue) {
                return modelValue.toDate();
            });
        },
        require: 'ngModel'
    }
});

Answer 2

您可以创建过滤器，如下所示：

myApp.filter('moment', function() {
    return function(input) {
        return moment(input);
    };
});

您可以选择将参数传递给过滤器，并使其调用各种时刻函数。看一下棱角filters，我相信你会想到一些适合你需要的东西。

Answer 3

所提议的解决方案都不适合我。我遇到了同样的问题并解决了：

...
<input type="date" ng-model="selectedMoment" />
...
<script>
 angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.selectedMoment = moment().toDate();
       //...more code...
       var momentDate = moment($scope.selectedMoment);
       //...more code...
     }]);
</script>

Answer 4

<input type="date" />

需要具有特定格式的字符串，或（可能）JavacSript Date（）对象。 http://www.w3schools.com/html/html_form_input_types.asp

所以你不能真正使用像这样的momentjs对象。

如果您希望将字符串作为结果，请使用type="date"输入。如果你想拥有像格式和其他东西一样的时刻，你必须创建自己的指令或过滤器。

Answer 5

提交时拉原始格式将其更改为新格式。

HTML

<input type="date" ng-model="input.NewEventDate" >  <button type="button" class="btn btn-success" ng-click="add()">submit</button>

的javascript

$scope.add = function(){
$scope.input.NewEventDate = moment($scope.input.NewEventDate).format("DD-MM-YYYY");
}

绑定AngularJS中的input [date]和Moment.js

5 个答案: