2017-06-08 2 views
1

Ich habe ein Spring Boot + Angular 1-basiertes Projekt in jHipster generiert. Ich bin ein bisschen Neuling der Winkelwelt. Alles funktioniert gut, aber wenn ich das Datum mit dem mitgelieferten UI Datepicker (https://angular-ui.github.io/bootstrap) eingib, ist sein Format JJJJ-MM-TT, auch wenn ich Spanisch als mein einziges Sprachpaket definiert habe (ich würde es vorziehen, dd/zu sein) MM/JJJJ). Das ist der Code-Schnipsel für die Eingabe:Datumformat für ui Datepicker ändern (jHipster)

regulierungsversions dialog.html

<div class="form-group"> 
    <label class="control-label" 
     data-translate="selfprotectionApp.regulationVersion.versionDate" 
     for="field_versionDate">Version Date</label> 
    <div class="input-group"> 
     <input id="field_versionDate" type="text" class="form-control" 
      name="versionDate" uib-datepicker-popup="{{dateformat}}" 
      ng-model="vm.regulationVersion.versionDate" 
      is-open="vm.datePickerOpenStatus.versionDate" /> <span 
      class="input-group-btn"> 
      <button type="button" class="btn btn-default" 
       ng-click="vm.openCalendar('versionDate')"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
     </span> 
    </div> 
</div> 

Hier gibt es die {{dateformat}} Bindung, aber ich weiß nicht, wo jHipster nimmt sie von. Die einzigen Übereinstimmungen befinden sich in der Datei date-util.service.js, aber das Ändern des Formats scheint sich nicht zu ändern.

datum util.service.js

(function() { 
    'use strict'; 

    angular 
     .module('selfprotectionApp') 
     .factory('DateUtils', DateUtils); 

    DateUtils.$inject = ['$filter']; 

    function DateUtils($filter) { 

     var service = { 
      convertDateTimeFromServer: convertDateTimeFromServer, 
      convertLocalDateFromServer: convertLocalDateFromServer, 
      convertLocalDateToServer: convertLocalDateToServer, 
      dateformat: dateformat 
     }; 

     return service; 

     function convertDateTimeFromServer(date) { 
      if (date) { 
       return new Date(date); 
      } else { 
       return null; 
      } 
     } 

     function convertLocalDateFromServer(date) { 
      if (date) { 
       var dateString = date.split('-'); 
       return new Date(dateString[0], dateString[1] - 1, dateString[2]); 
      } 
      return null; 
     } 

     function convertLocalDateToServer(date) { 
      if (date) { 
       return $filter('date')(date, 'yyyy-MM-dd'); 
      } else { 
       return null; 
      } 
     } 

     function dateformat() { 
      return 'yyyy-MM-dd'; 
     } 
    } 

})(); 

Natürlich könnte ich den {{dateformat}} Ausdruck durch ein Datumsformat in HTML ersetzen, aber ich mag es für das gesamte Projekt tun.

+0

Vielleicht ist Ihr 'dateformat' nicht richtig eingestellt. Ich nehme an, dass das irgendwie im Controller gemacht wird. – neptune

Antwort

1

Es gibt keinen Standard Weg in eckigen JS um Datenformat von einem Anbieter zum Beispiel für das gesamte Projekt einzurichten.

Was Sie tun könnten; {{dateformat | date:'MM/dd/yyyy'}} ODER einen globalen Filter für diese Anforderung zu definieren, um es leicht zu geben (Quelle https://stackoverflow.com/a/18402623/3687474)

.filter('myDate', function($filter) {  
    var angularDateFilter = $filter('date'); 
    return function(theDate) { 
     return angularDateFilter(theDate, 'dd MMMM @ HH:mm:ss'); 
    } 
}); 

und verwendet es so: ein Filter mit Ihrem Format definieren, um so verwendet werden {{dateformat | myDate }}

Die ultimative Lösung ist eine sehr robuste Bibliothek zu verwenden, um Ihre Daten wie moment.js zu verwalten und es angularjs diretives das ist meine Lieblingslösung; da es für viele Anwendungen und Datumsmanipulationen besser skalierbar ist. Jedoch; Hinzufügen von Bibliotheken zu Ihrem Projekt hat immer eine Performance-Kosten;)

+0

Danke! Werde es versuchen –