【问题标题】:How to subtract two angularjs date variables如何减去两个angularjs日期变量
【发布时间】:2013-02-24 06:33:09
【问题描述】:

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

我正在尝试根据两个日期之间的天数来设置触发系统,以便对某些要进行风格化的事物进行样式化。例如,如果它在 10 天内我希望它使用 style 1,如果它在 20 天内使用 style 2 等等。

【问题讨论】:

  • 你的代码是什么样的?
  • 对添加的 2 个答案有什么想法吗?

标签: jquery angularjs


【解决方案1】:

基本的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;

使用 Date 库之一(例如 moment.js):

var d1 = moment("01/16/2013");
var d2 = moment("02/26/2013");
var days = moment.duration(d2.diff(d1)).asDays();

【讨论】:

    【解决方案2】:

    您只需将日期转换为时间戳,然后减去。

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

    【讨论】:

      【解决方案3】:

      您可以使用angular-moment 计算差异,使用 amDifference 过滤器:

      以毫秒为单位获取两个日期之间的差异。参数是 日期、单位和使用精度。日期默认为当前日期。示例:

      <span>Difference: {{ dateFrom | amDifference : dateTo : 'days' }} days</span>
      

      【讨论】:

        【解决方案4】:

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

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

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

        编辑

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

        scope.diffscope.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">
            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; }
        

        【讨论】:

        • 好吧,我想真正的问题是我如何计算天数的差异?
        • @ChrisMoutray 这是一个很好的例子,但是如何为数组中的每个项目做到这一点?
        • @vittore 你的意思是你有一个对象列表,比如 angularjs 网站主页上的 TODO 示例?在这种情况下我认为每个子对象都必须是一个范围对象var newscope = $rootScope.$new();,然后你会使用 $watch 来对付它
        • 对,但是我如何使用我创建的这个范围访问这些范围/制作ng-repeat
        • 这将给出两个日期之间的天数,但它不会给出时间范围分布的确切天数。例如:d1 = 06/24/2015 2PM, d2 = 06/25/02/2015 2PM 差异将给出 2 天 时间范围内的天数将为 3 天 2 个值可以相同或不同,视情况而定。我相信第二个更有趣
        【解决方案5】:

        这行得通,这里有 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);
        }
        

        【讨论】:

        • 如何适应这种方法以分钟计算?
        • 它实际上是以毫秒为单位计算差异,(千分之一秒)并将结果除以 _MS_PER_DAY 得到天数。因此,如果您想获得分钟,您可以添加一个变量“除数”来替换它并传递多少毫秒来除,或者将 _MS_PER_DAY 更改为每分钟毫秒,或者 = 1000 * 60 :)
        【解决方案6】:

        那一刻 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();等更多详情请查看http://momentjs.com/docs/

        【讨论】:

          【解决方案7】:

          我尝试了下面的一个,它对我有用

          var selecteddate = new Date($rootscope.selectvalue);
          $scope.firstDate = selecteddate .getTime();
          $scope.SecondDate = new Date().getTime();
          

          选定日期是从日历中选择的日期,它来自父范围。第二个日期将是今天的日期。稍后我会使用moment diff找到差异。

          var differenceinDays=parseInt(
                moment.duration(
                  moment($scope.firstDate).diff(
                    moment($scope.SecondDate)
                  )
                ).asDays()
              );
          

          我使用 parseInt 是因为我只想返回整数值

          希望这可行

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2012-06-07
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2020-10-06
            • 1970-01-01
            相关资源
            最近更新 更多