0

Bootstrap 3 DateTimePickereonasdanから使用しようとしています。すべてが機能していますが、入力内の実際の日付をangle ng-modelにバインドすることで問題を満たしました。ピッカーを使用してデータを変更しているときに、 'dp.change'イベントが機能しています。日付が入力内で変更されていますが、スペースバーやその他のキーを押してng-modelのアップデート検出を行う必要があります。ブートストラップ3 DateTimePicker - 'dp.change'の後に角型モデルへのバインドが機能しない

コードのいくつかの平和:角度指令と

JS:

(function() { 
    'use strict'; 

    var module = angular.module('feedApp'); 

    module.directive('datetimepicker', [ 
     '$timeout', 
     function ($timeout) { 
      return { 
       require: '?ngModel', 
       restrict: 'EA', 
       scope: { 
        options: '@', 
        onChange: '&', 
        onClick: '&' 
       }, 
       link: function ($scope, $element, $attrs, controller) { 
        $($element).on('dp.change', function() { 
         //alert("change"); 
         $timeout(function() { 
          var dtp = $element.data('DateTimePicker'); 
          controller.$setViewValue(dtp.date()); 
          $scope.onChange(); 
         }); 
        }); 

        $($element).on('click', function() { 
         $scope.onClick(); 
        }); 

        controller.$render = function() { 
         if (!!controller) { 
          if (controller.$viewValue === undefined) { 
           controller.$viewValue = null; 
          } 
          else if (!(controller.$viewValue instanceof moment)) { 
           controller.$viewValue = moment(controller.$viewValue); 
          } 
          $($element).data('DateTimePicker').date(controller.$viewValue); 
         } 
        }; 

        $($element).datetimepicker($scope.$eval($attrs.options)); 
       } 
      }; 
     } 
    ]); 
})(); 

HTML:

<div style="max-width: 250px"> 
    <div class="input-group input-group-sm date"> 
     <input type="text" class="form-control" options="{format:'DD.MM.YYYY HH:mm', locale:'pl'}" datetimepicker ng-model="feed.reminderDateTime" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
</div> 

この問題を解決するためにどのように任意のアイデア?私は感謝するでしょう。

答えて

0

戻っている間も同様の問題がありました。参考にするソースコードはありませんが、そのようなものだったことを覚えています。あなたのNG-モデルとして

ng-model="feed.reminderDateTime"

があなたのコントローラでは、あなたが次にこの$scope.feed = {reminderDateTime:''};

を行う必要がありますが、私はそれが行く方法を知ってみましょう、このような$scope.feed.reminderDateTime

経由でアクセスすることができるはずである

0

require( 'datetimepicker');

Vue.directive('datetimepicker', { 
    twoWay: true, //very important to bind the modeldata 
    bind: function() { 
     $(this.el).datetimepicker({ 
      format: 'YYYY/MM/DD', //see moment for more valid date time formats 
      useCurrent: false 
     }).on('dp.change', function (value) { 
      //todo: do the required changed to the value here 
     }); 
    }, 
    update: function (value) { 
     $(this.el).val(value).trigger('dp.change'); 
    }, 
    unbind: function() { 
     $(this.el).off().datetimepicker('destroy'); 
    } 
}); 
関連する問題