Das Datumspicker-Datumsformat von Angular Bootstrap formatiert den ng-Modellwert nicht

Sie können $ Parser wie unten gezeigt verwenden, dies hat es für mich gelöst.

window.module.directive('myDate', function(dateFilter) {
  return {
    restrict: 'EAC',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.Push(function(viewValue) {
        return dateFilter(viewValue,'yyyy-MM-dd');
      });
    }
  };
});

HTML:

<p class="input-group datepicker" >
  <input
     type="text"
     class="form-control"
     name="name"
     datepicker-popup="yyyy-MM-dd"
     date-type="string"
     show-weeks="false"
     ng-model="data[$parent.editable.name]" 
     is-open="$parent.opened"
     min-date="minDate"
     close-text="Close"
     ng-required="{{editable.mandatory}}"
     show-button-bar="false"
     close-on-date-selection="false"
     my-date />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openDatePicker($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>

Ich bin auf das gleiche Problem gestoßen und nach ein paar Stunden Protokollierung und Untersuchung habe ich es behoben.

Es stellte sich heraus, dass $ viewValue zum ersten Mal in einer Datumsauswahl ein Wert ist, also eine Zeichenfolge, sodass der dateFilter ihn so anzeigt, wie er ist. Alles was ich getan habe, ist es in ein Date-Objekt zu parsen.

Suchen Sie nach diesem Block in der Datei ui-bootstrap-tpls

  ngModel.$render = function() {
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

und ersetze es durch:

  ngModel.$render = function() {
    ngModel.$viewValue = new Date(ngModel.$viewValue);
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

Hoffentlich hilft das :)

Das format, das durch datepicker-popup angegeben wird, ist nur das Format für das angezeigte Datum. Das zugrunde liegende ngModel ist ein Date-Objekt. Wenn Sie versuchen, es anzuzeigen, wird es als standardkonforme Standardwiedergabe angezeigt.

Sie können es nach Belieben anzeigen, indem Sie den date-Filter in der Ansicht verwenden. Wenn Sie es für die Analyse in der Steuerung benötigen, können Sie $filter in die Steuerung einfügen und es als $filter('date')(date, format) aufrufen. Siehe auch den Datumsfilter docs .

Sie können Formatierer verwenden, nachdem Sie einen Wert in Ihrer Datepicker-Direktive ..__ ausgewählt haben. Zum Beispiel

angular.module('foo').directive('bar', function() {
    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            ctrl.$formatters.Push(function(value) {
                if (value) {
                    // format and return date here
                }

                return undefined;
            });
        }
    };
});

VERKNÜPFUNG .

Mit so vielen Antworten bereits geschrieben, hier ist mein Take. 

Mit Angular 1.5.6 & ui-bootstrap 1.3.3 fügen Sie dies einfach dem Modell hinzu und Sie sind fertig.

ng-model-options="{timezone: 'UTC'}" 

Hinweis: Verwenden Sie diese Option nur, wenn Sie sich Sorgen machen, dass das Datum einen Tag hinter dem Datum liegt und sich keine zusätzliche Zeit von T00: 00: 00.000Z beschäftigt 

Plunkr hier aktualisiert: 

http://plnkr.co/edit/nncmB5EHEUkZJXRwz5QI?p=preview

Alle vorgeschlagenen Lösungen funktionierten nicht für mich, aber die nächste kam von @Rishii.

Ich verwende AngularJS 1.4.4 und UI Bootstrap 0.13.3.

.directive('jsr310Compatible', ['dateFilter', 'dateParser', function(dateFilter, dateParser) {
  return {
    restrict: 'EAC',
    require: 'ngModel',
    priority: 1,
    link: function(scope, element, attrs, ngModel) {
      var dateFormat = 'yyyy-MM-dd';

      ngModel.$parsers.Push(function(viewValue) {
        return dateFilter(viewValue, dateFormat);
      });

      ngModel.$validators.date = function (modelValue, viewValue) {
        var value = modelValue || viewValue;

        if (!attrs.ngRequired && !value) {
          return true;
        }

        if (angular.isNumber(value)) {
          value = new Date(value);
        }

        if (!value) {
          return true;
        }
        else if (angular.isDate(value) && !isNaN(value)) {
          return true;
        }
        else if (angular.isString(value)) {
          var date = dateParser.parse(value, dateFormat);
          return !isNaN(date);
        }
        else {
          return false;
        }
      };
    }
  };
}])

Ich kann dies beheben, indem Sie untenstehenden Code in meine JSP-Datei einfügen. Jetzt sind sowohl die Modell- als auch die UI-Werte gleich.

<div ng-show="false">
    {{dt = (dt | date:'dd-MMMM-yyyy') }}
</div>  

Schritte zum Ändern des Standard-Datumsformats von ng-model

Für verschiedene Datumsformate überprüfen Sie bitte die Datumsangaben für das Datumsformat jqueryui. Hier habe ich beispielsweise TT/MM/JJ verwendet

Eckjjs Direktive erstellen

angular.module('app', ['ui.bootstrap']).directive('dt', function () {
return {
    restrict: 'EAC',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        ngModel.$parsers.Push(function (viewValue) {
           return dateFilter(viewValue, 'dd/mm/yy');
        });
    }
 }
});

DateFilter-Funktion schreiben

function dateFilter(val,format) {
    return $.datepicker.formatDate(format,val);
}

In der HTML-Seite schreiben Sie das ng-modal-Attribut

<input type="text" class="form-control" date-type="string"  uib-datepicker-popup="{{format}}" ng-model="src.pTO_DATE" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-button-bar="false" show-weeks="false" dt />

Die Direktive datepicker (und datepicker-popup) erfordert, dass das ng-model ein Date-Objekt ist. Dies ist dokumentiert hier .

Wenn Sie möchten, dass ng-model eine Zeichenfolge in einem bestimmten Format ist, müssen Sie eine Wrapper-Direktive erstellen. Hier ist ein Beispiel ( Plunker ):

(function () {
    'use strict';

    angular
        .module('myExample', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
        .controller('MyController', MyController)
        .directive('myDatepicker', myDatepickerDirective);

    MyController.$inject = ['$scope'];

    function MyController ($scope) {
      $scope.dateFormat = 'dd MMMM yyyy';
      $scope.myDate = '30 Jun 2017';
    }

    myDatepickerDirective.$inject = ['uibDateParser', '$filter'];

    function myDatepickerDirective (uibDateParser, $filter) {
        return {
            restrict: 'E',
            scope: {
                name: '@',
                dateFormat: '@',
                ngModel: '='
            },
            required: 'ngModel',
            link: function (scope) {

                var isString = angular.isString(scope.ngModel) && scope.dateFormat;

                if (isString) {
                    scope.internalModel = uibDateParser.parse(scope.ngModel, scope.dateFormat);
                } else {
                    scope.internalModel = scope.ngModel;
                }

                scope.open = function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    scope.isOpen = true;
                };

                scope.change = function () {
                    if (isString) {
                        scope.ngModel = $filter('date')(scope.internalModel, scope.dateFormat);
                    } else {
                        scope.ngModel = scope.internalModel;
                    }
                };

            },
            template: [
                '<div class="input-group">',
                    '<input type="text" readonly="true" style="background:#fff" name="{{name}}" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="internalModel" is-open="isOpen" ng-click="open($event)" ng-change="change()">',
                    '<span class="input-group-btn">',
                        '<button class="btn btn-default" ng-click="open($event)">&nbsp;<i class="glyphicon glyphicon-calendar"></i>&nbsp;</button>',
                    '</span>',
                '</div>'
            ].join('')
        }
    }

})();

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body ng-app="myExample">
    <div ng-controller="MyController">
      <p>
        Date format: {{dateFormat}}
      </p>
      <p>
        Value: {{myDate}}
      </p>
      <p>
        <my-datepicker ng-model="myDate" date-format="{{dateFormat}}"></my-datepicker>
      </p>
    </div>
  </body>

</html>

Das Definieren einer neuen Direktive zur Umgehung eines Fehlers ist nicht wirklich ideal. 

Da der Datepicker später Datumsangaben korrekt anzeigt, kann eine einfache Problemumgehung darin bestehen, die Modellvariable zuerst auf Null und dann nach einer Weile auf das aktuelle Datum zu setzen: 

$scope.dt = null;
$timeout( function(){
    $scope.dt = new Date();
},100);

Endlich bekam ich eine großartige Lösung für das obige Problem. Winkelband hat genau die gleiche Funktion, die ich erwarte. Durch das Anwenden von date-format="MM/dd/yyyy" date-type="string" bekam ich mein erwartetes Verhalten beim Aktualisieren von ng-model in einem bestimmten Format.

<div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
        <input type="text"  autoclose="true"  class="form-control" ng-model="selectedDate" name="date" date-format="MM/dd/yyyy" date-type="string" bs-datepicker>
      </div>
      <hr>
      {{selectedDate}}
     </form>
</div>

hier arbeitet plunk link

Nachdem ich die obigen Antworten durchgesehen hatte, kam ich dazu und es hat perfekt funktioniert, ohne dass Sie ein zusätzliches Attribut zu Ihrem Markup hinzufügen müssen

angular.module('app').directive('datepickerPopup', function(dateFilter) {
    return {
        restrict: 'EAC',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ngModel.$parsers.Push(function(viewValue) {
                return dateFilter(viewValue, 'yyyy-MM-dd');
            });
        }
    }
});