如何将 datetimepicker js 包装到 AngularJS 指令中 [英] How to wrap the datetimepicker js into AngularJS directive

问题描述

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

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

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

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

将 datetimepicker 连接到 angularjs ，这个话题很有帮助，我试着包装我的 datetimepicker遵循步骤的指令.

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

app.directive('datetimepicker', function() {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围、元素、属性、ngModelCtrl){console.log('调用 datetimepicker 链接...');var 选择器 = element.datetimepicker({dateFormat: 'dd/MM/yyyy hh:mm:ss'});//ngModelCtrl.$setViewValue(picker.getDate());//模型->视图ngModelCtrl.$render(function() {console.log('ngModelCtrl.$viewValue@'+ngModelCtrl.$viewValue);picker.setDate(ngModelCtrl.$viewValue || '');});//视图->模型picker.on('dp.change', function(e) {console.log('dp.change'+e.date);范围.$应用(函数(){ngModelCtrl.$setViewValue(e.date);});});}};});

并在我看来使用它.

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

我发现了一些问题.

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

提前致谢.

解决方案

我遇到了同样的问题.以下是我最终做的对我很有效的事情:

'use strict';angular.module('frontStreetApp.directives').directive('psDatetimePicker', 函数(时刻){var 格式 = 'MM/DD/YYYY hh:mm A';返回 {限制:'A'，要求:'ngModel'，链接:函数(范围、元素、属性、ctrl){element.datetimepicker({格式:格式});var picker = element.data("DateTimePicker");ctrl.$formatters.push(function (value) {var 日期 = 时刻(值)；如果(日期.isValid()){返回日期格式(格式)；}返回 '​​';});element.on('change', function (event) {范围.$应用(函数(){var date = picker.getDate();ctrl.$setViewValue(date.valueOf());});});}};});

这是 HTML:

<输入类型="文本"ng-model="dueDate"ps-日期时间选择器class="表单控件">

您可以查看要点和更多信息 在我的博文中.

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

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/, there is a datetimepicker, but I dislike the usage of this directive.

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

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>

There are some problems I found.

1. If the date is set via json before rendered in view, the initial date did not display, I can not see any log of the execution of ngModel render method.
2. When I picked a date, it got a string based datetime to the json data, not a long format. And in other related fragment in the view, the string based date can not parsed by angular date filter.
3. When used it in modal dialog, it's value is not cleared when the modal window is popup in the next time.

Thanks in advance.

解决方案

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.

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