Question

我需要使用angular + bootstrap创建一个带日期和时间的输入字段。我发现这个datetime picker我看起来很兴奋 - 在一个字段中的日期和时间，并阻止用户错误的版本。我写了一个指令，datepickers开始了，但它改变了视图，模型没有改变......我也试过onSelect，但也没有发生任何事情

<div class="container container-fluid" ng-controller="Ctrl1">
2+2={{2+2}}, var1={{var1}}
    <form class="form-horizontal" novalidate name="form" ng-submit="submit()">
    <div class="well">
        <div id="date" class="input-append" datetimez ng_model="var1">
            <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" id="input1" name="input1" ng_model="var1"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
        </div>
    </div>
</form>

</div>

JS

var project = angular.module('project',['ui.bootstrap']);

project.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datetimepicker({
                    dateFormat:'dd/MM/yyyy hh:mm:ss',
                    language: 'pt-BR',
                    onSelect:function (date) {
                        //alert('zz');
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    };
});

project.controller('Ctrl1', ['$scope', '$rootScope',  function(scope, rootScope){

    scope.var1="123";

}]);

如何解决？建立连接？

Answer 1

所以，问题是：

在ng_model元素中按ng-model更改div id=date;
从ng_model元素中删除input并实施ngModelCtrl.$render函数，以便对元素进行模型更改
根据component docs：

唯一暴露的事件是'changeDate'，它会在事件对象上公开'date'和'localDate'属性

所以你需要以其他方式处理变更事件，看看：

element.datetimepicker({
  dateFormat:'dd/MM/yyyy hh:mm:ss',
    language: 'pt-BR'
  }).on('changeDate', function(e) {
    ngModelCtrl.$setViewValue(e.date);
    scope.$apply();
  });

这是working Plnkr。

一些额外提示：

如前所述，删除内部ng-model并实施ngModelCtrl.$render以处理模型更改
使用template属性来封装组件的内部元素

使用$ render的一个非常简单的例子：

var picker = element.data('datetimepicker');

ngModelCtrl.$render = function() {
  if (ngModelCtrl.$modelValue) {
    picker.setLocalDate(ngModelCtrl.$modelValue);
  } else {
    picker.setLocalDate(null);
  }
}

Answer 2

迟到的答案，但你总是可以使用这个

Bootstrap-ui/datetime-picker它使用来自bootstrap-ui的datepicker和timepicker，而不使用jquery或moment.js

Answer 3

CaioToOn解决方案非常好。但最重要的是，似乎现在有以下地址的“官方”包装：

https://gist.github.com/derfbn/73350e5f8eb92c3967d7

将datetimepicker连接到angularjs

3 个答案: