Директива AngularJS datetimepicker не работает при изменении значения - PullRequest
Новая
       8

Директива AngularJS datetimepicker не работает при изменении значения

0 голосов
/ 25 мая 2018

У меня проблема с datetimepicker в AngularJS.Когда страница загружена, запускается директива datetimepicker, и я получаю правильное значение, которое хочу.Но когда я выбрал другую дату, директива не работает, хотя я должен изменить событие внутри.

Несколько дней назад, это сработало, но не сейчас.Я проверял много раз.Я не знаю почему, потому что я ничего не изменил.

Код: 

.directive("datetimeselect", [
"Config", function (Config) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datetimepicker({
                format: Config.defaultConfig.dateTimeFormat
            });
            el.on('dp.change', function (event) {
                scope.$apply(function () {
                    var date = moment(event.date);
                    ngModel.$setViewValue(date.format(Config.defaultConfig.dateTimeFormat));
                });
            });

            //format text from the user (view to model)
            ngModel.$parsers.push(function (data) {
                return moment(data).format(Config.defaultConfig.dateTimeFormat);
            });

            //format text going to user (model to view)
            ngModel.$formatters.push(function (data) {
                return moment(data).format(Config.defaultConfig.dateTimeFormat);
            });

        }
    };
}
])

А это HTML 

<div class="form-group col-md-6">
    <label for="ToTime" class="control-label">To Time</label>
    <input type="text" class="form-control" name="ToTime" id="ToTime"
           ng-model="record.ToTime" datetimeselect />
</div>

1 Ответ

0 голосов
/ 26 мая 2018

$parser не требуется, а $formatter необходимо установить дату: 

    function postLink(scope, element, attr, ngModel) {
      var ignoreChangeEvent = false;
      element.datetimepicker();
      element.on('dp.change', function(event) {
          if (ignoreChangeEvent) {
            ignoreChangeEvent = false;
            return;
          }
          scope.$apply(function() {
            ngModel.$setViewValue(event.date);
          });
      });
      ngModel.$formatters.push(function (date) {
          ignoreChangeEvent = true;
          element.data("DateTimePicker").setDate(date);
      });
    }

DEMO 

angular.module('bootstrap-timepicker', [])
.directive('datetimepicker', [
  function() {
    return {
      restrict: 'A',
      link: postLink,
      require: 'ngModel'
    };

    function postLink(scope, element, attr, ngModel) {
      var ignoreChangeEvent = false;
      element.datetimepicker();
      element.on('dp.change', function(event) {
          if (ignoreChangeEvent) {
            ignoreChangeEvent = false;
            return;
          }
          scope.$apply(function() {
            ngModel.$setViewValue(event.date);
          });
      });
      ngModel.$formatters.push(function (date) {
          ignoreChangeEvent = true;
          element.data("DateTimePicker").setDate(date);
      });
    }
  }
])
.controller('IndexController', function($scope) {
   $scope.date = new Date();
});
<link rel="stylesheet" href="//unpkg.com/bootstrap@3/dist/css/bootstrap.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap@3/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-datetime-picker@2.3/css/bootstrap-datetimepicker.css">

<script src="//unpkg.com/jquery@2"></script>
<script src="//unpkg.com/bootstrap@3/dist/js/bootstrap.js"></script>
<script src="//unpkg.com/moment"></script>
<script src="//unpkg.com/eonasdan-bootstrap-datetimepicker@3/src/js/bootstrap-datetimepicker.js"></script>
<script src="//unpkg.com/angular/angular.js"></script>

<body ng-app="bootstrap-timepicker">
    <div class="container" ng-controller="IndexController">
        <h4>Datetimepicker</h4>
        <div class="form-group">
            <div class='input-group date' datetimepicker  ng-model="date">
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <p>
                ng-model value: {{date}}
            </p>
            <div class='input-group date' datetimepicker  ng-model="date">
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...