1

つまり、bootstrap-datepicker を使用するときに ng-model を更新する方法を見つける必要があります。これは、 http://plnkr.co/edit/nNTEM25I2xX2zRKOWbD1?p=previewで何が起こっているかを示すために作成したプランカーです。私は周りを検索してみましたが、モデルに値を渡すためにディレクティブを使用する必要があることはかなり肯定的です。テキスト ボックスに何かを入力すると、選択した日付モデルが更新されますが、datepicker を使用しただけでは何も起こりません。以下のディレクティブは機能するはずですが、残念ながらあまり効果がないようです。

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 に答える