Come formattare la data in angularjs

Voglio formattare la data come mm/dd/yyyy. Ho provato quanto segue e nessuno di questi funziona per me. Qualcuno mi può aiutare con questo?

riferimento: ui-date

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

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

Angular.js ha un filtro data incorporato.

dimostrazione

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

Puoi visualizzare i formati di data supportati nell'origine per il filtro data .

modifica :

Se stai cercando di ottenere il formato corretto nel datepicker (non è chiaro se stai usando datepicker o stai solo cercando di usare il suo formattatore), quelle stringhe di formato supportate sono qui: https://api.jqueryui.com/datepicker/

Se non si dispone di un campo di input, ma si desidera semplicemente visualizzare una data stringa con una formattazione corretta, è possibile semplicemente scegliere:

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

e nel file js usare:

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

Questo convertirà la data in stringa in un nuovo oggetto data in javascript e visualizzerà la data nel formato MM / gg / aaaa.

Uscita: 15/12/2014

Modifica
Se si utilizza una data stringa del formato stringa "2014-12-19 20:00:00" (passato da un backend PHP), è necessario modificare il codice in quello in: https://stackoverflow.com / a / 27616348/1904479

Aggiunta ulteriore
Da JavaScript è possibile impostare il codice come:

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

nel caso in cui tu abbia già una data con te, altrimenti puoi usare il seguente codice per ottenere la data di sistema corrente:

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

Per maggiori dettagli sui formati di data, consultare: https://docs.angularjs.org/api/ng/filter/date

Sto usando questo e sta funzionando bene.

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

Questo non è esattamente quello che stai chiedendo, ma potresti provare a creare un campo di immissione della data in HTML come qualcosa di simile:

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

Quindi per stampare questo sulla pagina dovrai usare:

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

Infine, nel mio controller ho dichiarato un metodo che crea una data dal valore di input (che in Chrome è apparentemente analizzato 1 giorno di riposo):

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

Così il gioco è fatto. Per vedere tutto funzionante vedere il seguente plunker: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview. Buona fortuna!

Questo funzionerà:

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

NOTA: una volta sostituiti questi, la data / millis rimanenti verranno convertiti in un foramt dato.

vedi dateAPI angolare : API AngularJS: data

Uso:

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

exampe:

Codice:

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

Risultato:

10/29/2010

Io uso il filtro

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

poi

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

Basta passare il formato data UTC dal codice lato server al lato client

e usa la sintassi seguente -

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

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

Dopo aver esaminato tutte le soluzioni di cui sopra, la seguente è stata la soluzione più veloce per me. Se si utilizza materiale angolare:

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

Per impostare il formato:

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

Modifica: devi anche impostare la parseDate per digitare una data (da questa risposta Cambia formato di md-datepicker in Materiale angolare )

$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'];

        });

Qui il nome del controller è "myController" e il nome dell'app è "myApp".

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

            </li>

        </ul>
    </div>

Il risultato sarà simile al seguente: - * 10-29-2010 * 01-03-2013

Ok il problema sembra provenire da questa riga:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

In realtà questa linea è l'associazione con l'interfaccia utente di jQuery che dovrebbe essere il posto per iniettare il formato dei dati.

Come puoi vedere, var optsnon esiste alcuna proprietà dateFormatcon il valore di ng-date-format come potresti scegliere.

Comunque la direttiva ha una costante chiamata uiDateConfigper aggiungere proprietà a opts.

La soluzione flessibile (consigliata):

Da qui puoi vedere che puoi inserire alcune opzioni iniettando nella direttiva una variabile controller con le opzioni dell'interfaccia utente jquery.

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

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

La soluzione hardcoded:

Se non si desidera ripetere questa procedura continuamente, modificare il valore di uiDateConfigin date.js in:

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

Ho avuto lo stesso problema e, come sopra, ho pensato che ci fosse un metodo nativo in JavaScript. Il fatto è che new Date(valueofdate)restituisce un oggetto Date.

Ma controlla in http://www.w3schools.com/js/js_date_formats.asp , la parte che dice zero iniziale. Una data da una stringa, ad esempio un'eco da PHP, deve essere simile a:

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

Questo passerà una stringa, ad esempio: '1999-3-3'e JavaScript eseguirà l'analisi di un oggetto con il formato giusto con

$scope.valueofdate = new Date(valueofdate);

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

Link a PHP per i formati di data: http://www.w3schools.com/php/func_date_date_format.asp .

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

Utilizzare questo dovrebbe funzionare bene. :) I campi reviewData e dateValue possono essere modificati in base al resto del parametro può essere lasciato uguale

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

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