将 datetimepicker 连接到 angularjs答案

【问题标题】：connecting datetimepicker to angularjs将 datetimepicker 连接到 angularjs
【发布时间】：2013-10-20 20:24:55
【问题描述】：

我需要使用 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>

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

}]);

如何解决？建立联系？

【问题讨论】：

你能在 Fiddle 中发布你的例子吗？
不知何故它在 jsfiddle 中不起作用（
我不明白如何将它移动到 jsfiddle，我试着在那里添加最大代码
jsfiddle.net/sLmyz我复制了所有代码，包括所有文件，但日期对话框没有出现（这是两个文件的屏幕截图img5.imageshack.us/img5/8231/9xbp.png
并且输入中的操作日期屏幕发生了变化，但 var1 steel 旧值 img62.imageshack.us/img62/3882/5enm.png

标签： twitter-bootstrap angularjs

【解决方案1】：

所以，问题是：

在div id=date 元素中更改ng_modelper ng-model；
从 input 元素中删除 ng_model 并实现 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);
  }
}

【讨论】：

谢谢！ “并实现 ngModelCtrl.$render 来处理模型更改”你是什么意思？是否“ngModelCtrl.$setViewValue(e.date);”不够？实际上我不明白输入新值的方式（我们为 div 设置了新值（它是具有指令 'datetimez' 的 div）不输入那么日期值如何跳转到输入？这是因为 class="input-append" ? 这是引导谁做这个价值移动？
回答您的两个问题后，您使用$setViewValue 在视图发生变化时更新模型。当模型发生变化时，您使用$render 更新视图。看看here。将在答案中添加一个小示例。
刚刚添加了一个如何实现ngModelCtrl.$render函数的例子。
好的，我知道我们为 DIV 元素设置了 ViewValue 但是这个值是如何输入的？输入根本没有 ngModel 属性...它们以某种方式通过 css - id="input1" 和 class="input-append" 连接？还有一个关于输入的 data-format="MM/dd/yyyy HH:mm:ss PP" 属性的问题。如果我们硬编码 dateFormat:'dd/MM/yyyy hh:mm:ss' in out derictive 那么它会被忽略吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

你不应该在 Angular 中使用 JQuery！