Angular.js <input type = "data"> cambio formato del valore inserito

Question

<label>From</label> 
<input type="date" ng-model="startDate"/> 
<label>To</label> 
<input type="date" ng-model="endDate"/> 

<button class="btn btn-success" ng-click="getStatistics(startDate, endDate)">Update</button> 

** *** JS

$scope.getStatistics = function(startDate, endDate) { 
    $http.get('/admin/api/stats?start=' + startDate + '&end=' + endDate).success(function(data) { 
     $scope.stats = data; 
    }); 
} 

Il codice sopra spinta startDate e endDate valore URL, ma la problema che ho è che il valore inviato è come 2014-12-01 e voglio che il mio formato sia 01-05-2014

Qualche suggerimento?

Answer 1

Bene, la data di inserimento fornisce una data allo ISO format. Se si desidera formattare la data, si sarebbe probabilmente bisogno di una funzione come questa:

function formatDate(isoDateString) 
{ 
    var newDate = new Date(isoDateString); 
    return ('0' + newDate.getDate()).slice(-2)+"-"+('0' + (newDate.getMonth() + 1)).slice(-2)+"-"+newDate.getFullYear(); 
} 

aggiungo uno al mese a causa getMonth si restituisce un numero compreso tra 0 e 11. La fetta (-2) è per lo 0

Answer 2

Uso Filtro concetto

angular.module('yourmodule').filter('date', function($filter) 
{ 
return function(input) 
{ 
    if(input == null){ return ""; } 

    var _date = $filter('date')(new Date(input), 'dd-MM-yyyy'); 

    return _date.toUpperCase(); 

}; 
}); 



<span>{{ d.time | date }}</span> 

o controller

var filterdatetime = $filter('date')($scope.date); 

Date filtering and formatting

Answer 3

Sfortunatamente, i browser che implementano un tipo di elemento specifico per la gestione delle date (come Chrome) utilizzano il formato della data del sistema operativo e nessuno dei quali sono a conoscenza consente di modificare il formato (non è nemmeno nelle specifiche del W3C). Inoltre, se il browser non lo supporta (la maggior parte di essi), utilizza un normale input di testo, ma accetta solo i dati in formato ISO-8601, il che peggiora le cose.

Personalmente, evito type="date" perché così è praticamente inutile, a meno che non ci si trovi su un dispositivo mobile che lo supporta (come iOS). Quindi se puoi, usa un input di testo e se vuoi che converta il valore del testo in un oggetto data da assegnare al tuo modello, così come riformattarlo dopo essere stato aggiornato, devi trovare o scrivere una direttiva per Fai questo. C'è lo UI-Bootstrap date picker, ma non riformatta la data per te e porta più cose di quelle che forse ti servono. Potrebbero esserci anche altri.

Tuttavia, nello spirito di rispondere alla tua domanda, ho messo insieme una direttiva dimostrativa che riformatta sia la data immessa nel formato di tua scelta (usando Angular $date filter). Si riformatterà su incolla, sfocatura/modifica, o dopo una breve pausa di inattività dopo aver digitato una data in (quest'ultimo potrebbe non funzionare particolarmente bene nel mondo reale, ma sembra un po 'fico, estrarlo se è strano). L'altro difetto è che utilizza il meccanismo predefinito del browser per analizzare un Date. Se questo è insufficiente, sostituirlo con qualcosa che è. Sono sicuro che non è ancora pronto per la produzione, ma è un inizio. Se è abbastanza utile, lo trasformerò in un modulo formale su Github.

angular.module("demo.directives", []) 
    .directive('date', ['$filter', '$timeout', function($filter, $timeout) { 
    return { 
     restrict: 'A', 
     require: '?^ngModel', 
     link: function($scope, $element, $attrs, ngModel) { 
     var format = $attrs.dateFormat || 'short', // default date format 
      validityName = 'date'; // change the name to whatever you want to use to check errors 

     // called by the directive to render the first time, and also on events when the value is changed 
     var formatter = function() { 
      var date = ngModel.$modelValue ? 
       $filter('date')(ngModel.$modelValue, format) : 
       ngModel.$viewValue; 

      $element.val(date); 
     }; 

     // parse the value when it is being set from the view to the model 
     ngModel.$parsers.unshift(function(value) { 
      // you may wish to use a more advanced date parsing module for better results 
      var date = new Date(value); 

      if (isNaN(date)) { 
       // invalid date, flag invalid and return undefined so we don't set the model value 
       ngModel.$setValidity(validityName, false); 
       return undefined; 
      } 

      // clear invalid flag 
      ngModel.$setValidity(validityName, true); 

      return date; 
     }); 

     // used by ngModel to display to render the directive initially; we'll just reformat 
     ngModel.$render = formatter; 

     var handle; 

     // trigger the formatter on paste 
     $element.on('paste cut', function() { 
      if (handle) $timeout.cancel(handle); 
      handle = $timeout(formatter, 0); // needs to break out of the current context to work 
     }) 
     // you can axe this whole event if you don't like the reformat after a pause 
     $element.on('keydown', function() { 
      if (handle) $timeout.cancel(handle); 
      handle = $timeout(formatter, 750); 
     }) 
     // trigger the formatter on blur 
     $element.on('blur change', formatter); 
     } 
    }; 
    }]); 

Usage:

Includere il directive from this plunk nel modulo, quindi nel codice HTML usano

<input type="text" date date-format="short" ng-model="myDateValue" />