Jak uzyskać meridian (am/pm) z momentjs i angularjs

Question

Mam pytanie dotyczące biblioteki moments.js, mam aplikację w angularjs, gdzie mam sześć wybranych elementów na rok, miesiąc, dzień, godzinę, minut i format AM/PM. Korzystam z następującego momentu formatowania do zbudowania daty m.format ("RRRR-MM-DD hh: mm: ss a).

Kod jest w następujący sposób:

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

uzyskać dane m.hour(), m.minute(), etc, ale istnieje sposób, aby uzyskać format AM/PM, nie znalazłem nic o tym, co być może m.meridian() => "am "or" pm ".

Chciałbym zbudować tablicę przekazującą jako parametr, jeśli am lub pm, a następnie również uzyskać z dowolnej daty, jeśli am lub pm daty.

Answer 1

kilka rzeczy:

• Słowo szukasz jest "meridiem" nie "meridian". Jest to łacińskie słowo oznaczające "środek dnia". RANO. to "ante meridiem" (przed południem) i P.M. to "post meridiem" (po południu).

• Funkcja .hours() i tablica wejście przekazywane do konstruktora moment zarówno oczekiwać godziny 24-godzinny, od 0 do 23. Nie ma wbudowanej funkcji, aby przyjąć lub wyjście 12-godzinne stężenie zegar lub meridiem (am/pm).

• parsowanie i formatowanie funkcje w tej chwili mają opcje dla 12-godzinnych godzin zegarowych (h lub hh) i meridiem (A lub a), ale nie jesteś analizowania lub formatowanie w przypadku użycia, tak by ich być nieco niezdarnym w użyciu. W szczególności opierają się one na aktualnych ustawieniach regionalnych momentu, więc przetestowanie ciągu byłoby problematyczne, jeśli ustawienia regionalne nie zostały ustalone na konkretny język.

• Możesz użyć tych prostych funkcji do konwersji z 12-godzinnego + meridio na 24-godzinny i na odwrót. Nie są one specyficzne dla chwili, więc można ich używać również z obiektem Date lub w innym miejscu.

  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 
      } 
  } 
  

  Aby przetestować te funkcje:

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

• także uważać podczas wywoływania .month() aby uzyskać numer miesiąca, wyniki są 0-11, nie 1-12. To samo dotyczy budowania tablicy wejściowej. Twoje menu musi mieć wartość 0-11, lub musisz odpowiednio dodać lub odjąć 1.

Answer 2

Inna odpowiedź jest bardzo dobra. Pomogło mi to stworzyć moje demo, ponieważ bez niego straciłbym punkt z miesiącem (od 0 do 11).

Nie musisz jednak tworzyć funkcji meridiem, ponieważ jest już zaimplementowana w moment.js. Chodzi o to, że użycie nie jest bardzo jasne z dokumentów.

Można użyć funkcji meridiem takiego:

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 

Jeśli potrzebujesz logiczną zamiast AM/PM ciąg można przekazać ciąg AM/PM do curDate.localeData().isPM(meridiem). To zwróci true lub false.

Punkt z miesiącem, w którym nie chcesz wyświetlać od 0 do 11 w swoim wyborze, można naprawić za pomocą funkcji displayLabel, która zwiększy każdą wartość tablicy miesięcy. Wtedy będziesz miał to wyświetlane od 1 do 12, ale przechowywane jako od 0 do 11. Jeśli piszesz dyrektywę, która mogłaby być lepiej obsługiwana przez funkcję $parser/$formatter z ngModel.

Proszę spojrzeć na demo poniżej lub na ten 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

Można też zrobić coś takiego m.format('a')