1

简而言之，我需要在使用 bootstrap-datepicker 时找到一种更新 ng-model 的方法。这是我为演示http://plnkr.co/edit/nNTEM25I2xX2zRKOWbD1?p=preview发生的事情而制作的一个 plunker 。我已经尝试过四处搜索，并且相当肯定我需要使用指令将值传递给模型。在文本框中键入内容将更新选定的日期模型，但仅使用日期选择器不会执行任何操作。下面的指令似乎应该可以工作，但不幸的是它似乎没有太大的影响。

app.directive('datepicker', function() {
    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, element, attrs, ngModelCtrl) {
            $(function() {
                element.datepicker({
                    dateFormat : 'dd/mm/yy',

                    onSelect : function(date) {

                        ngModelCtrl.$setViewValue(date);

                        element.datepicker("setDate", date);

                        scope.$apply();

                    }
                });
            });
        }
    }
});

一个简单的解决方案是只使用另一个日期选择器，但不幸的是，由于限制我可以使用多少个外部库，这是我必须使用的日期选择器。任何见解将不胜感激！！！

4

1 回答 1

2

我强烈建议使用 UI-Bootstrap 或类似的东西。

但是对于那些出于某种原因需要使用 Bootstraps 日期选择器的人来说，这里是使用您的指令的起点，并进行了一些更改：

app.directive('datepicker', function() {
   return {
      restrict: 'A',
      require: 'ngModel',
      compile: function() {
         return {
            pre: function(scope, element, attrs, ngModelCtrl) {
               // Initialize the date-picker
               $(element).datepicker({
                  format: 'dd/mm/yyyy'
               }).on('changeDate', function(ev) {
                  // Binds the changes back to the controller
                  // I also found that event.format() returns the string
                  // I wasn't aware of that. Sure beats using the date object and formatting yourself.
                  ngModelCtrl.$setViewValue(ev.format('dd/mm/yyyy'));

                  // I HATE using $apply, but I couldn't get it to work without
                  scope.$apply();
               });
            }
         }
      }
   }
});

HTML：

<input type="text" datepicker="" ng-model="date" />

非常简单明了，允许您重复使用，here is a working plunker

于 2014-07-03T14:44:27.457 回答