Question

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

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

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

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

Answer 1

我强烈建议使用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

使用带有angularjs的bootstrap-datepicker。需要找到一种在选择日期时更新ng-model的方法

1 个答案: