Je suis assez nouveau sur angularjs, mais le voilà. Je suis capable de deux dates à travers angularjs sous la forme dd/mm/yyyy
, mais ce que je dois faire est en quelque sorte de soustraire les deux dates pour obtenir la différence en jours entre les deux. J'ai créé une fonction jQuery pour cela, mais je ne sais pas comment passer les deux dates à la fonction. Alors je me demandais s'il y avait une autre façon de s'y prendre?
J'essaie de mettre en place un système de déclenchement en fonction du nombre de jours entre les deux dates pour styliser certaines choses. Par exemple, si c'est dans les 10 jours, je veux qu'il utilise style 1 et si dans les 20 jours, utilisez style 2 et ainsi de suite.
Je suis aussi un novice angularjs, mais ne gèreriez-vous pas cela en rendant les propriétés disponibles via votre modèle d'affichage javascript?
Par exemple, un champ style qui change en fonction des champs de date (le style renvoie le style 1 lorsque la différence est de 10 jours) et, si tout se passe bien, la mise à jour angularjs lie les mises à jour à l'écran.
Je pense que le bon terme pour cela est un propriété calculée ou propriété calculée
MODIFIER
Vous ne savez pas trop si c'est ce que vous cherchez, mais voyez par exemple le calcul des différences de date et la modification d'un style en fonction des propriétés du modèle de vue (étendue).
scope.diff
et scope.col
sont les 2 propriétés auxquelles se lier
http://jsfiddle.net/chrismoutray/wfjv6/
HTML
<script src="http://code.angularjs.org/0.10.4/angular-0.10.4.min.js" ng:autobind></script>
<div ng:controller="ComputedPropertiesCtrl">
first date <input ng:model="firstdate"> second date <input ng:model="seconddate"> difference {{diff}}
<div>when the difference is greater than 10 color changes to green</div>
<div>eg set the second date to 15/01/2013</div>
<div style="background-color:{{col}};"> State </div>
</div>
JS
function ComputedPropertiesCtrl() {
var scope = this;
scope.firstdate = '01/01/2013';
scope.seconddate = '10/01/2013';
scope.data_before = [];
scope.differenceInDays = function() {
var dt1 = scope.firstdate.split('/'),
dt2 = scope.seconddate.split('/'),
one = new Date(dt1[2], dt1[1]-1, dt1[0]),
two = new Date(dt2[2], dt2[1]-1, dt2[0]);
var millisecondsPerDay = 1000 * 60 * 60 * 24;
var millisBetween = two.getTime() - one.getTime();
var days = millisBetween / millisecondsPerDay;
return Math.floor(days);
};
scope.color = function() {
return (scope.differenceInDays() > 10) ? 'green' : 'red';
};
scope.$watch('[firstdate, seconddate]', function(currScope,newVal,oldVal) {
scope.data_before = oldVal;
scope.diff = scope.differenceInDays();
});
scope.$watch('[firstdate, seconddate]', function(currScope,newVal,oldVal) {
scope.data_before = oldVal;
scope.col = scope.color();
});
}
CSS
h2 { position: fixed; right: 10px; top: 10px; color: red; background:white;z-index:1000; }
input { width: 100px; }
div { margin: 10px; padding: 10px; }
Manière javascript de base:
var d1 = new Date('01/16/2013');
var d2 = new Date('02/26/2013');
var milliseconds = d2-d1;
var seconds = milliseconds / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
En utilisant l’une des bibliothèques de date (telle que moment.js):
var d1 = moment("01/16/2013");
var d2 = moment("02/26/2013");
var days = moment.duration(d2.diff(d1)).asDays();
vous convertissez simplement la date en horodatage, puis vous soustrayez.
var Date1 = 08/16/2004;
var Date2= 10/24/2005;
var timestamp1 = new Date(Date1).getTime();
var timestamp2 = new Date(Date2).getTime();
var diff = timestamp1 - timestamp2
var newDate = new Date (diff);
Vous pouvez utiliser moment angulaire pour calculer la différence, en utilisant le filtre amDifference :
Obtenez la différence entre deux dates en millisecondes. Les paramètres sont Date, unités et usePrecision. La date par défaut est la date actuelle. Exemple:
<span>Difference: {{ dateFrom | amDifference : dateTo : 'days' }} days</span>
Cela fonctionne, et voici 2 fonctions de date javascript sans faille dont vous ne devriez jamais vous passer ...
// Returns the days between a & b date objects...
function dateDiffInDays(a, b) {
var _MS_PER_DAY = 1000 * 60 * 60 * 24;
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}
// Calculate how many days between now and an event...
function daysTill(e) {
var eventE = new Date(e);
var today = new Date();
return dateDiffInDays(today, eventE);
}
Le moment où la bibliothèque JavaScript est vraiment très utile et facile à utiliser:
var parsedServerOutTime = moment(serverOutTime, "HH:mm:ss");
var parsedServerInTime = moment(serverInTime, "HH:mm:ss");
var milliseconds= parsedServerOutTime.diff(parsedServerInTime) //default milliseconds
var days = moment.duration(parsedServerOutTime .diff(parsedServerInTime )).asDays();// For days
asWeeks();
asMonths();
asYears();
etc etc pour plus de détails, consultez http://momentjs.com/docs/