javascript - 如何将 datetimepicker js 包装到 AngularJS 指令中

Question

我花了一些时间研究 angularjs 的现有日期时间指令。

ngularUI 和 AngularStrap 都没有提供我需要的日期时间选择器。当然，我知道用一个日期选择器和时间选择器一起来归档的目的。

我已经从 Internet 和 stackoverflow 搜索了相关主题。发现了一些有趣且有用的信息。

http://dalelotts.github.io/angular-bootstrap-datetimepicker/ ，有一个日期时间选择器，但我不喜欢使用这个指令。

connecting datetimepicker to angularjs ，这个主题非常有帮助，我试着按照这些步骤包装我的 datetimepicker 指令。

我的工作基于https://github.com/Eonasdan/bootstrap-datetimepicker ，一个基于 bootstrap 3 的日期时间选择器，UI 非常漂亮。

app.directive('datetimepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            console.log('call datetimepicker link...');
            var picker = element.datetimepicker({
                dateFormat: 'dd/MM/yyyy hh:mm:ss'
            });

            //ngModelCtrl.$setViewValue(picker.getDate());

            //model->view
            ngModelCtrl.$render(function() {
                console.log('ngModelCtrl.$viewValue@'+ngModelCtrl.$viewValue);
                picker.setDate(ngModelCtrl.$viewValue || '');
            });

            //view->model
            picker.on('dp.change', function(e) {
                console.log('dp.change'+e.date);              
                scope.$apply(function(){
                    ngModelCtrl.$setViewValue(e.date);
                });
            });
        }
    };
});

并在我的 View 中使用它。

<div class="col-md-6">
  <div class="input-group date" id="endTime" data-datetimepicker  ng-model="stat.endTime" data-date-format="MM/DD/YYYY hh:mm A/PM" >
    <input class="form-control" type="text" placeholder="End"/>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

我发现了一些问题。

1. 如果在 View 中渲染之前通过 json 设置日期，则不会显示初始日期，我看不到任何 ngModel 渲染方法的执行日志。
2. 当我选择一个日期时，它得到一个基于字符串的日期时间到 json 数据，而不是长格式。并且在 View 中的其他相关片段中， Angular 日期过滤器无法解析基于字符串的日期。
3. 在模态对话框中使用时，下次弹出模态窗口时不清除该值。

提前致谢。

Answer 1

我遇到了同样的问题。以下是我最终所做的对我来说效果很好的事情:

'use strict';

angular.module('frontStreetApp.directives')
    .directive('psDatetimePicker', function (moment) {
        var format = 'MM/DD/YYYY hh:mm A';

        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attributes, ctrl) {
                element.datetimepicker({
                    format: format
                });
                var picker = element.data("DateTimePicker");

                ctrl.$formatters.push(function (value) {
                    var date = moment(value);
                    if (date.isValid()) {
                        return date.format(format);
                    }
                    return '';
                });

                element.on('change', function (event) {
                    scope.$apply(function() {
                        var date = picker.getDate();
                        ctrl.$setViewValue(date.valueOf());
                    });
                });
            }
        };
    });

这是 HTML:

<!-- The dueDate field is a UNIX offset of the date -->
<input type="text"
       ng-model="dueDate"
       ps-datetime-picker
       class="form-control">

您可以查看要点和更多信息 in my blog post .