Wie bekomme ich den Meridian (am/pm) mit momentsjs und angularjs

Question

Ich habe eine Frage zu der Bibliothek moments.js, ich habe eine Anwendung in angularjs, wo ich sechs ausgewählte Elemente für das Jahr, Monat, Tag, Stunde, Minuten und am/pm Format. Ich verwende den folgenden Format-Moment, um das m.format-Datum zu erstellen ('JJJJ-MM-TT hh: mm: ss a).

Der Code ist wie folgt:

var m = moment([scope.val.year, scope.val.month, scope.val.date, scope.val.hour, scope.val.minute]); //build date 

model.$setViewValue(m.format('YYYY-MM-DD hh:mm:ss a')) 

ich die Daten m.hour(), m.minute(), usw., aber es gibt einen Weg, um die AM/PM-Format zu bekommen, ich habe nichts dagegen, etwas vielleicht gefunden als m.meridian() => "am "or" pm ".

Ich würde das Array als Parameter übergeben, wenn am oder pm, und dann würde auch von jedem Datum erhalten, wenn am oder pm Datum.

Answer 1

Ein paar Dinge:

• Das Wort Sie suchen ist "meridiem", nicht "meridian". Es ist ein lateinisches Wort für "Mittag". A.M. ist "ante meridiem" (vormittags) und P.M. ist "post meridiem" (nach Mittag).

• .hours() Die Funktion und die Eingangsanordnung an das moment Konstruktor übergibt sowohl Stunden einer 24-Stunden-Uhr erwartet, von 0 bis 23. Es gibt keine integrierte Funktion einen 12-Stunden-Wert zu akzeptieren oder Ausgang, oder ein meridiem (am/pm).

• Die Parsen und Formatierungsfunktionen in Moment Möglichkeiten habe für 12-Stunden-Stunden (h oder hh) und meridiem (A oder a), aber Sie sind nicht Parsen oder Formatierung in Ihrem Anwendungsfall, so würden sie ein wenig ungeschickt zu benutzen sein. Insbesondere basieren sie auf den aktuellen Gebietsschemaeinstellungen des Moments. Daher wäre das Testen einer Zeichenfolge problematisch, wenn das Gebietsschema nicht auf eine bestimmte Sprache festgelegt wäre.

• Sie können diese einfachen Funktionen verwenden, um von 12 Stunden + Meridiem auf 24 Stunden und umgekehrt umzustellen. Sie sind nicht spezifisch für den Moment, also können Sie sie auch mit dem Objekt Date oder anderswo verwenden.

  function hours12to24(h, pm) { 
      return h == 12 ? pm ? 12 : 0 : pm ? h + 12 : h; 
  } 
  
  function hours24to12(h) { 
      return { 
       hour : (h + 11) % 12 + 1, 
       pm : h >= 12 
      } 
  } 
  

  diese Funktionen testen:

  function test() { 
      for (var i = 0; i <= 23; i++) { 
      var x = hours24to12(i); 
      var h = hours12to24(x.hour, x.pm); 
      console.log(i + " == " + x.hour + (x.pm ? " pm" : " am") + " == " + h); 
      } 
  } 
  

• Auch vorsichtig sein, wenn .month() Aufruf der Monatszahl zu bekommen, sind die Ergebnisse 0-11, 1-12 nicht. Das Gleiche gilt für das Erstellen des Eingabearrays. Ihr Dropdown muss entweder 0-11 verwenden, oder Sie müssen 1 entsprechend addieren oder subtrahieren.

Answer 2

Die andere Antwort ist sehr gut. Es half mir, meine Demo zu erstellen, denn ohne sie hätte ich den Punkt mit dem Monat (0 bis 11) verpasst.

Sie müssen die meridiem-Funktion jedoch nicht erstellen, da sie bereits in moment.js implementiert ist. Der Punkt ist, dass die Verwendung aus den Dokumenten nicht sehr klar ist.

können Sie die meridiem Funktion wie folgt verwendet werden:

var curDate = moment().hour(yourHour); // create a moment date with the hour you'd like to test 
var meridiem = curDate 
      .localeData().meridiem(hour); // will return AM/PM String 

Wenn Sie einen boolean statt AM/PM Zeichenfolge benötigen, können Sie die AM/PM-Zeichenfolge curDate.localeData().isPM(meridiem) passieren. Das wird wahr oder falsch sein.

Der Punkt mit dem Monat, in dem Sie keine 0 bis 11 in Ihrer Auswahl anzeigen möchten, kann durch eine displayLabel-Funktion korrigiert werden, die jeden Wert des Monatsarrays erhöht. Dann wird es 1 bis 12 angezeigt, aber als 0 bis 11 gespeichert. Wenn Sie eine Direktive schreiben, die besser durch eine $parser/$formatter Funktion von ngModel behandelt werden könnte.

Bitte werfen Sie einen Blick auf die Demo unten oder auf diese jsfiddle.

angular.module('demoApp', []) 
 
\t .filter('momentDate', MomentDateFilter) 
 
\t .filter('momentUTC', MomentUTCFilter) 
 
\t .controller('MainController', MainController); 
 

 
function MomentDateFilter() { 
 
\t return function(input, format) { 
 
     return moment(input).format(format); 
 
    }; 
 
} 
 

 
function MomentUTCFilter() { 
 
\t return function(input, format) { 
 
     return moment.utc(input).format(format); 
 
    }; 
 
} 
 

 
function MainController($scope, $log) { 
 
    var vm = this, 
 
     now = moment(); 
 
    
 
    vm.checkHour = checkHour; 
 
    vm.dateSelect = dateSelection(); 
 
    vm.displayLabel = displayLabel; 
 
    vm.now = now; 
 
    vm.selected = { 
 
     "day": 27, 
 
     "month": 8, 
 
     "year": 2015, 
 
     "hour": 18, 
 
     "meridiem": "PM", 
 
     "minutes": 6, 
 
     "seconds": 20 
 
    }; 
 
    
 
    function dateSelection() { 
 
     return { // generated on every page load for demo 
 
      \t // better store the generate object as json and load it 
 
      day: createRange(1,31), 
 
      month: createRange(0,11), 
 
      year: createRange(1900, 2100), 
 
      hour: createRange(0,24), 
 
      minutes: createRange(0,59), 
 
      seconds: createRange(0,59), 
 
      meridiem: 'AM_PM'.split('_') 
 
     }; 
 
\t } 
 
    
 
    function displayLabel(key, value) { 
 
    \t if (key === 'month') { 
 
     \t value++; // increment month for correct month value 1 to 12 
 
     } 
 
     return value; 
 
    } 
 
    
 
    function checkHour(key, hour) { // updates meridiem (AM/PM) 
 
     if (key === 'hour') { 
 
      var curDate = moment().hour(hour); 
 
      //console.log('check hour', hour, curDate.hour(), curDate.localeData()); 
 
      vm.selected.meridiem = curDate 
 
       .localeData().meridiem(hour); 
 
      //console.log(curDate 
 
      // .localeData().isPM(vm.selected.meridiem)); 
 
     } 
 
     //console.log('changed', key); 
 
    } 
 
    //console.log(this.dateSelect); 
 
    function createRange(from, to) { 
 
     var arr = []; 
 
    \t for(i=from; i<=to; i++) { 
 
     \t arr.push(i); 
 
     } 
 
     //console.log(arr); 
 
     return arr; 
 
    } 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script> 
 
<div ng-app="demoApp" ng-controller="MainController as mainCtrl" class="container-fluid"> 
 
    <form class="form-inline"> 
 
     <div ng-repeat="(key, array) in mainCtrl.dateSelect" class="form-group"> 
 
      <label>{{key}}</label><select class="form-control" ng-change="mainCtrl.checkHour(key, array[mainCtrl.selected[key]])" ng-model="mainCtrl.selected[key]" ng-options="value as mainCtrl.displayLabel(key, value) for value in mainCtrl.dateSelect[key]" ng-disabled="key === 'meridiem'"> 
 
      </select> 
 
     </div> 
 
    </form> 
 
    selected: <pre>{{mainCtrl.selected|json}}</pre> 
 
    raw date (unformatted, UTC): {{mainCtrl.selected | momentUTC}}<br/> 
 
    date formatted (meridiem locale): {{mainCtrl.selected | momentUTC : 'LLLL' }}<br/> 
 
    
 
    
 
    now (momentjs) {{mainCtrl.now}} 
 
</div>

Answer 3

könnten Sie tun, auch so etwas wie m.format('a')