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

Question

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

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

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

http://dalelotts.github.io/angular-bootstrap-datetimepicker/，有一个 datetimepicker，但我不喜欢这个指令的用法。

将 datetimepicker 连接到 angularjs，这个主题非常有帮助，我尝试按照步骤包装我的 datetimepicker 指令。

我的工作基于https://github.com/Eonasdan/bootstrap-datetimepicker，一个基于 bootstrap 3 的 datetimepicker，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);
                });
            });
        }
    };
});

并在我看来使用它。

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

提前致谢。

Answer 1

I had the same issue. Here's what I ended up doing that worked well for me:

'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());
                    });
                });
            }
        };
    });

Here's the HTML:

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

You can check out the gists and a bit more information in my blog post.

Answer 2

可以帮助你解决第一点；将$watch添加到链接函数内的元素并设置

值=“{{$scope.variableWithTheInitialDate}}”

在文本字段中；这样加载时，日期时间选择器就已经设置好了。
对于第二点，我会使用moment.js但还没有尝试你的例子来告诉你如何:-P 祝你好运！