webentwicklung-frage-antwort-db.com.de

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

Ich verwende den Bootstrap Date Picker in meiner eckigen Anwendung. Wenn ich jedoch ein Datum aus diesem Datumsauswähler auswähle, das ng-model zugrunde liegt, das ich gebunden habe, wird es aktualisiert. aber es macht jedes mal so ein datum 

"2009-02-03T18:30:00.000Z"

anstatt 

02/04/2009

Ich habe einen Plunkr für den gleichen Plunkr Link erstellt

Mein HTML- und Controller-Code ist wie folgt

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
    <p>above filter will just update above UI but I want to update actual ng-modle</p>


    <h4>Popup</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control"
              datepicker-popup="{{format}}" 
              ng-model="dt"
              is-open="opened" min-date="minDate"
              max-date="'2015-06-22'" 
              datepicker-options="dateOptions" 
              date-disabled="disabled(date, mode)" 
              ng-required="true" close-text="Close" />
              <span class="input-group-btn"> 
                <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
    <!--<div class="row">
        <div class="col-md-6">
            <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
        </div>
    </div>-->

    <hr />
    {{dt}}
</div>
  </body>
</html>

Winkelsteuerung

angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope) {


  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };


  $scope.format = 'dd-MMMM-yyyy';
};

Vielen Dank im Voraus für die Überprüfung meiner Frage.

UPDATE

Ich rufe folgende Methode für das Posten meiner Daten auf und VAR ist ein Array der Größe 900, das Datumsauswahlvariablen enthält. 

public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {

        var query = this.EntityQuery.from('SaveFormData').withParameters({
            $method: 'POST',
            $encoding: 'JSON',
            $data: {
                VAR: formToSave.VAR,
                X: formToSave.X,
                CurrentForm: formToSave.currentForm,
            }
        });

        var deferred = this.q.defer();

        this.manager.executeQuery(query).then((response) => {
            deferred.resolve(response);
        }, (error) => {
                deferred.reject(error);
            });

        return deferred.promise;
    }
61
Jenish Rabadiya

Obwohl ähnliche Antworten veröffentlicht wurden, möchte ich gerne etwas beitragen, das mir am einfachsten und saubersten schien. Angenommen, Sie verwenden AngularUI datepicker und Ihr Anfangswert für das ng-Model wird nicht formatiert, indem Sie einfach die folgende Direktive zu Ihrem Projekt hinzufügen, um das Problem zu beheben:

angular.module('yourAppName')
.directive('datepickerPopup', function (){
    return {
        restrict: 'EAC',
        require: 'ngModel',
        link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
  }
}
});

Ich habe diese Lösung in den Github AngularUI-Ausgaben gefunden und deshalb gehen alle Leute an die Menschen dort.

101
stefan2k

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>
23
Rishab777

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 :)

13
christina

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 .

9
link

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&UUML;PFUNG .

5
Miraage

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

4

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;
        }
      };
    }
  };
}])
3

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>  
1
Rajesh Dave

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 />
1
Sumit Jambhale

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>

0
user147677

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);
0
gm2008

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

0
Jenish Rabadiya

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');
            });
        }
    }
});
0