如何减去两个angularjs日期变量 [英] How to subtract two angularjs date variables

问题描述

我对 angularjs 还很陌生，但它就是这样.我可以通过 angularjs 以 dd/mm/yyyy 形式显示两个日期，但我需要做的是以某种方式减去两个日期以获得两者之间的天数差异.我创建了一个 jquery 函数来执行此操作，但我不知道如何将两个日期传递给该函数.所以我想知道是否有不同的方法来解决这个问题?

我正在尝试根据两个日期之间的天数来设置触发系统，以便将某些事物风格化.例如，如果是在 10 天内，我希望它使用 style 1，如果它在 20 天内使用 style 2，依此类推.

解决方案

我也是一个 angularjs 新手，但您不会通过通过您的 javascript 视图模型提供属性来处理这个问题吗?

例如，有一个 style 字段根据日期字段更改(即，如果差异为 10 天，则样式返回样式 1)，并希望通过 angularjs 绑定将更新传播到屏幕.

我认为正确的术语是计算属性或计算属性

编辑

不确定这是否是您要查找的内容，但请参阅 fiddle 例如计算日期差异和更改样式的所有基于视图模型(范围)的属性

scope.diff 和 scope.col 是要绑定到的 2 个属性

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">第一个日期 <input ng:model="firstdate">第二个日期<input ng:model="seconddate">差异{{diff}}<div>当差异大于 10 时，颜色变为绿色</div><div>例如将第二个日期设置为 15/01/2013</div><div style="background-color:{{col}};">状态

JS

function ComputedPropertiesCtrl() {var 作用域 = 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('/'),一个 = 新日期(dt1[2], dt1[1]-1, dt1[0]),二 = 新日期(dt2[2], dt2[1]-1, dt2[0]);var 毫秒每天 = 1000 * 60 * 60 * 24;var millisBetween = two.getTime() - one.getTime();var days = millisBetween/millisecondsPerDay;返回 Math.floor(days);};scope.color = function() {返回 (scope.differenceInDays() > 10) ?'绿色':'红色'；};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 { 位置:固定；右:10px；顶部:10px；红色;背景:白色；z-index:1000；}输入 { 宽度:100px;}div {边距:10px；填充:10px；}

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?

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.

解决方案

I'm also an angularjs novice but wouldn't you handle this by making properties available through your javascript view model?

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.

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

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

这篇关于如何减去两个angularjs日期变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！