I am fairly new to angularjs, but here it goes. I am able two dates through angularjs in the form dd/mm/yyyy
, but what I need to do is somehow subtract the two dates to get the difference in days between the two. I created a jquery function to do this, but I don't know how to pass in the two dates to the function. So I was wondering if there was a different way to go about this?
我对angularjs相当新,但在这里它。我可以通过dj / mm / yyyy形式的angularjs两个日期,但我需要做的是以某种方式减去两个日期以获得两者之间的天数差异。我创建了一个jquery函数来执行此操作,但我不知道如何将两个日期传递给函数。所以我想知道是否有不同的方法可以解决这个问题?
I am trying to set up a trigger system depending on the number of days in between the two dates for certain things to be stylized. For example if it's within 10 days I want it to use style 1 and if its within 20 days use style 2 and so on.
我正在尝试根据两个日期之间的天数来设置触发系统,以便对某些事物进行风格化。例如,如果它在10天内,我希望它使用样式1,如果它在20天内使用样式2,依此类推。
7 个解决方案
#1
2
I'm also an angularjs novice but wouldn't you handle this by making properties available through your javascript view model?
我也是一个angularjs新手但你不会通过你的javascript视图模型提供属性来处理这个问题吗?
For example have a style field that changes based on the date fields (ie style returns style 1 when if the difference is 10 days) and hopefully through the angularjs binding the updates will propagate to the screen.
例如,有一个样式字段根据日期字段更改(即样式返回样式1,如果差异为10天),并希望通过angularjs绑定更新将传播到屏幕。
I think the right term for this is a computed property or calculated property
我认为正确的术语是计算属性或计算属性
EDIT
编辑
Not sure if this is what you're looking for but see fiddle for example of calculating date diff and changing a style all based off properties of the view model (scope)
不确定这是否是你正在寻找的但是看小提琴,例如计算日期差异并根据视图模型的属性更改样式(范围)
scope.diff
and scope.col
are the 2 properties to bind to
scope.diff和scope.col是要绑定的2个属性
http://jsfiddle.net/chrismoutray/wfjv6/
http://jsfiddle.net/chrismoutray/wfjv6/
HTML
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
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
CSS
h2 { position: fixed; right: 10px; top: 10px; color: red; background:white;z-index:1000; }
input { width: 100px; }
div { margin: 10px; padding: 10px; }
#2
13
Basic javascript way:
基本的javascript方式:
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;
Using one of the Date libraries (such as moment.js):
使用其中一个Date库(例如moment.js):
var d1 = moment("01/16/2013");
var d2 = moment("02/26/2013");
var days = moment.duration(d2.diff(d1)).asDays();
#3
4
you simply convert date into timestamp and then subtract.
您只需将日期转换为时间戳然后减去。
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);
#4
4
You can use angular-moment to calculate the difference, using the amDifference filter:
您可以使用角度矩来计算差异,使用amDifference滤镜:
Get the difference between two dates in milliseconds. Parameters are date, units and usePrecision. Date defaults to current date. Example:
获取两个日期之间的差异(以毫秒为单位)。参数是日期,单位和usePrecision。日期默认为当前日期。例:
<span>Difference: {{ dateFrom | amDifference : dateTo : 'days' }} days</span>
#5
2
This works, and here are 2 flawless javascript date functions you should never be without...
这是有效的,这里有2个完美的javascript日期函数,你永远不应该没有...
// 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);
}
#6
0
The moment JavaScript library is really very useful and easy to use:
JavaScript JavaScript库非常有用且易于使用:
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 for more details check http://momentjs.com/docs/
asWeeks(); asMonths(); asYears();等等更多细节请查看http://momentjs.com/docs/
#7
-1
I tried the below one and it worked out for me
我尝试了下面的一个,它为我解决了
var selecteddate = new Date($rootscope.selectvalue);
$scope.firstDate = selecteddate .getTime();
$scope.SecondDate = new Date().getTime();
selected date is the one which is selected from calender and it is coming from parent scope. second date will be today's date. later i will find difference using moment diff.
选定日期是从日历中选择的日期,它来自父作用域。第二个日期将是今天的日期。后来我会发现使用时差的区别。
var differenceinDays=parseInt(
moment.duration(
moment($scope.firstDate).diff(
moment($scope.SecondDate)
)
).asDays()
);
I am using parseInt because i want to return the integer value only
我正在使用parseInt,因为我只想返回整数值
Hope this works
希望这有效
#1
2
I'm also an angularjs novice but wouldn't you handle this by making properties available through your javascript view model?
我也是一个angularjs新手但你不会通过你的javascript视图模型提供属性来处理这个问题吗?
For example have a style field that changes based on the date fields (ie style returns style 1 when if the difference is 10 days) and hopefully through the angularjs binding the updates will propagate to the screen.
例如,有一个样式字段根据日期字段更改(即样式返回样式1,如果差异为10天),并希望通过angularjs绑定更新将传播到屏幕。
I think the right term for this is a computed property or calculated property
我认为正确的术语是计算属性或计算属性
EDIT
编辑
Not sure if this is what you're looking for but see fiddle for example of calculating date diff and changing a style all based off properties of the view model (scope)
不确定这是否是你正在寻找的但是看小提琴,例如计算日期差异并根据视图模型的属性更改样式(范围)
scope.diff
and scope.col
are the 2 properties to bind to
scope.diff和scope.col是要绑定的2个属性
http://jsfiddle.net/chrismoutray/wfjv6/
http://jsfiddle.net/chrismoutray/wfjv6/
HTML
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
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
CSS
h2 { position: fixed; right: 10px; top: 10px; color: red; background:white;z-index:1000; }
input { width: 100px; }
div { margin: 10px; padding: 10px; }
#2
13
Basic javascript way:
基本的javascript方式:
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;
Using one of the Date libraries (such as moment.js):
使用其中一个Date库(例如moment.js):
var d1 = moment("01/16/2013");
var d2 = moment("02/26/2013");
var days = moment.duration(d2.diff(d1)).asDays();
#3
4
you simply convert date into timestamp and then subtract.
您只需将日期转换为时间戳然后减去。
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);
#4
4
You can use angular-moment to calculate the difference, using the amDifference filter:
您可以使用角度矩来计算差异,使用amDifference滤镜:
Get the difference between two dates in milliseconds. Parameters are date, units and usePrecision. Date defaults to current date. Example:
获取两个日期之间的差异(以毫秒为单位)。参数是日期,单位和usePrecision。日期默认为当前日期。例:
<span>Difference: {{ dateFrom | amDifference : dateTo : 'days' }} days</span>
#5
2
This works, and here are 2 flawless javascript date functions you should never be without...
这是有效的,这里有2个完美的javascript日期函数,你永远不应该没有...
// 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);
}
#6
0
The moment JavaScript library is really very useful and easy to use:
JavaScript JavaScript库非常有用且易于使用:
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 for more details check http://momentjs.com/docs/
asWeeks(); asMonths(); asYears();等等更多细节请查看http://momentjs.com/docs/
#7
-1
I tried the below one and it worked out for me
我尝试了下面的一个,它为我解决了
var selecteddate = new Date($rootscope.selectvalue);
$scope.firstDate = selecteddate .getTime();
$scope.SecondDate = new Date().getTime();
selected date is the one which is selected from calender and it is coming from parent scope. second date will be today's date. later i will find difference using moment diff.
选定日期是从日历中选择的日期,它来自父作用域。第二个日期将是今天的日期。后来我会发现使用时差的区别。
var differenceinDays=parseInt(
moment.duration(
moment($scope.firstDate).diff(
moment($scope.SecondDate)
)
).asDays()
);
I am using parseInt because i want to return the integer value only
我正在使用parseInt,因为我只想返回整数值
Hope this works
希望这有效