Jak sformatować datę w angularjs

Chcę sformatować datę jako mm/dd/yyyy. Wypróbowałem następujące i żadna z nich nie działa. Czy ktoś może mi w tym pomóc?

odniesienie: ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />

Angular.js ma wbudowany filtr daty.

próbny

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

Możesz zobaczyć obsługiwane formaty dat w źródle filtru dat .

edytuj :

Jeśli próbujesz uzyskać prawidłowy format w Datepicker (nie jest jasne, jeśli używasz DatePicker lub po prostu próbujesz użyć jego programu formatującego), te obsługiwane ciągi formatów są tutaj: https://api.jqueryui.com/datepicker/

Jeśli nie masz pola wejściowego, a chcesz po prostu wyświetlić datę w postaci ciągu z odpowiednim formatowaniem, możesz po prostu:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

aw pliku js użyj:

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

Spowoduje to przekonwertowanie daty w ciągu na nowy obiekt daty w javascript i wyświetlenie daty w formacie MM / dd / rrrr.

Wyjście: 15.12.2014

Edycja
Jeśli używasz ciągu znaków daty w formacie „2014-12-19 20:00:00” (przekazywanych z zaplecza PHP), powinieneś zmodyfikować kod na następujący: https://stackoverflow.com / a / 27616348/1904479

Dodawanie dalej
Z javascript możesz ustawić kod jako:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

to jest na wypadek, gdybyś już miał ze sobą randkę, w przeciwnym razie możesz użyć następującego kodu, aby uzyskać aktualną datę systemową:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

Więcej informacji na temat formatów dat można znaleźć pod adresem : https://docs.angularjs.org/api/ng/filter/date

Używam tego i działa dobrze.

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM

To nie jest dokładnie to, o co prosisz - ale możesz spróbować utworzyć pole wprowadzania daty w html, na przykład:

<input type="date" ng-model="myDate" />

Następnie, aby wydrukować to na stronie, której używałbyś:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

Wreszcie w moim kontrolerze zadeklarowałem metodę, która tworzy datę na podstawie wartości wejściowej (która w chrome jest najwyraźniej analizowana 1 dzień wolny):

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

Więc masz to. Aby zobaczyć, jak wszystko działa, zobacz następujący plunker: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview. Powodzenia!

To zadziała:

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

UWAGA: po ich zastąpieniu pozostała data / milis zostanie zamieniona na podany foramt.

patrz angular dateapi: AngularJS API: data

Stosowanie:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}

Przykład:

Kod:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

Wynik:

10/29/2010

Używam filtra

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

następnie

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}

Po prostu przekaż format daty UTC z kodu po stronie serwera do klienta

i użyj poniższej składni -

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

Po zapoznaniu się ze wszystkimi powyższymi rozwiązaniami, najszybszym rozwiązaniem było dla mnie poniższe. Jeśli używasz materiału kątowego:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

Aby ustawić format:

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

Edycja: Musisz również ustawić parseDate do wpisania daty (z tej odpowiedzi Zmień format md-datepicker w Angular Material )

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Tutaj nazwa kontrolera to „myController”, a nazwa aplikacji to „myApp”.

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

Wynik będzie wyglądał następująco: - * 10-29-2010 * 01-03-2013

Ok, problem wydaje się pochodzić z tej linii:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

Właściwie ta linia to powiązanie z interfejsem użytkownika jQuery, w którym powinno być miejsce do wstrzyknięcia formatu danych.

Jak widać, var optsnie istnieje żadna właściwość dateFormato wartości z formatu ng-date-format, jak można się spodziewać.

W każdym razie dyrektywa ma stałą wywoływaną uiDateConfigdo dodawania właściwości opts.

Elastyczne rozwiązanie (zalecane):

Z tego miejsca widać, że można wstawić kilka opcji wprowadzających do dyrektywy zmienną kontrolera z opcjami jquery ui.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

Rozwiązanie zakodowane na stałe:

Jeśli nie chcesz cały czas powtarzać tej procedury, zmień wartość uiDateConfigin date.js na:

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })

Miałem ten sam problem i tak jak powyższe komentarze, pomyślałem, że w JavaScript musi być metoda natywna. Rzecz w tym, że new Date(valueofdate)zwraca obiekt Date.

Ale sprawdź http://www.w3schools.com/js/js_date_formats.asp , część, która mówi zera wiodącego. Data z łańcucha, na przykład echo z PHP, musi wyglądać następująco:

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

Spowoduje to przekazanie na przykład ciągu znaków: '1999-3-3'a JavaScript wykona analizę do obiektu o odpowiednim formacie z

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Link do PHP dla formatów dat: http://www.w3schools.com/php/func_date_date_format.asp .

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

Użyj tego powinno działać dobrze. :) Pola reviewData i dateValue mogą być zmieniane, ponieważ reszta parametru może pozostać taka sama

{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>