如何包裹的DateTimePicker JS到AngularJS指令 [英] How to wrap the datetimepicker js into AngularJS directive

问题描述

我在研究angularjs的现有的datetime指令有时度过的。

I have spent sometime on researching the existing datetime directives of angularjs.

ngularUI和AngularStrap都因为我需要不提供一个DateTimePicker。当然，我知道用一个datepicker和timepicker一起归档的目的。

Both ngularUI and AngularStrap do not provide a datetimepicker as I needed. Of course, I know use a datepicker and timepicker together to archive the purpose.

我已搜查，从互联网和计算器的相关话题。发现了一些有趣和有用的信息。

I have searched the related topic from internet and stackoverflow. Found some interesting and helpful info.

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

http://dalelotts.github.io/angular-bootstrap-datetimepicker/, there is a datetimepicker, but I dislike the usage of this directive.

连接的DateTimePicker到angularjs ，这个话题是非常有帮助，我试图总结我的DateTimePicker指令下列步骤操作。

connecting datetimepicker to angularjs , this topic is very helpful, I tried to wrap my datetimepicker directive following the steps.

我的工作是基于 https://github.com/Eonasdan/bootstrap-datetimepicker ，自举3系的DateTimePicker，用户界面​​是非常好的。

My work is based on https://github.com/Eonasdan/bootstrap-datetimepicker, a bootstrap 3 based datetimepicker, the UI is very nice.

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

在我看来，使用它。

And use it in my 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. 如果日期是通过在视图渲染之前设置的JSON，最初的日期不显示，我看不到ngModel的执行任何日志渲染方法。


2. 当我拿起一个日期，它有一个基于字符串日期时间的JSON数据，而不是一个长格式。而在视图中的相关片段，该字符串基于日期不能被角日期过滤器解析。


3. 当模态对话框中使用它，它是当模式窗口是在接下来的时间弹出数值清零。

先谢谢了。

推荐答案

我有同样的问题。这是我最后做的工作很适合我：

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

这里是HTML：

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">

您可以检查出学家和位的更多信息<一个href=\"http://cdmckay.org/blog/2014/12/08/how-to-create-an-angular-directive-for-eonasdans-bootstrap-datetime-picker/\"相对=nofollow>在我的博客帖子。

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

这篇关于如何包裹的DateTimePicker JS到AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！