Javascript 比较两个日期angularjs

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30577172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:24:40  来源:igfitidea点击:

Compare two dates angularjs

javascriptangularjs

提问by nikitha

I have two dates to be compared in the following format the response coming from backend service has following date format

我有两个日期要以以下格式进行比较 来自后端服务的响应具有以下日期格式

alignFillDate - 2015-06-09 pickUpDate - 2015-05-10

alignFillDate - 2015-06-09 pickUpDate - 2015-05-10

so, front end needs to check the condition is if pickUpDate is less then the alignFillDate, we will increase the alignFillDate by 30 days, i.e, we increment the pickUpDate to next month(30 days from now ) and show different text on view

所以,前端需要检查条件是如果pickUpDate小于alignFillDate,我们将alignFillDate增加30天,即我们将pickUpDate增加到下个月(从现在起30天)并在视图中显示不同的文本

How, do i achieve this using angular and javascript. ? how does my html and controller needs to changed for this date calculation

我如何使用 angular 和 javascript 来实现这一点。? 我的 html 和控制器需要如何更改以用于此日期计算

回答by Ronald91

You save those date strings as Date objects, do a comparison with vanilla javascript and assign to scope or this.

您将这些日期字符串保存为 Date 对象,与 vanilla javascript 进行比较并分配给范围或 this。

   var alignFillDate = new Date("2015-06-09");
  var pickUpDate = new Date("2015-05-10");


  if (pickUpDate < alignFillDate) {
    alignFillDate = alignFillDate.setDate(alignFillDate.getDate() + 30);
  }

  $scope.pickUpDate = pickUpDate;
  $scope.alignFillDate = alignFillDate;

Here is a plunk that does what you are trying to do http://plnkr.co/edit/Kq7WA1cBcrwDyxDeBFAL?p=info.

这是一个 plunk,可以完成您正在尝试执行的操作http://plnkr.co/edit/Kq7WA1cBcrwDyxDeBFAL?p=info

回答by soote

You should use an angular filter to achieve this. The filter takes in the object containing both dates, and will return the formatted date.

您应该使用角度过滤器来实现这一点。过滤器接收包含两个日期的对象,并将返回格式化的日期。

Here is a filter that performs this operation:

这是一个执行此操作的过滤器:

myApp.filter('customDate', function($filter) {
  var DATE_FORMAT = 'yyyy-MM-dd';

  return function (input) {
    var alignFillDate = new Date(input.alignFillDate);   
    var pickUpDate = new Date(input.pickUpDate);
    if ( alignFillDate > pickUpDate) {
        alignFillDate.setDate(alignFillDate.getDate() + 30)
        alignFillDate = $filter('date')(alignFillDate, DATE_FORMAT);
        return alignFillDate + ' this date has been changed';
    } else {
        return $filter('date')(alignFillDate, DATE_FORMAT);   
    }
  }
});

Here is a working jsFiddle: http://jsfiddle.net/ADukg/6681/

这是一个有效的 jsFiddle:http: //jsfiddle.net/ADukg/6681/

回答by user1496087

Other way -- doing "from scratch": (Example in AngularJS). The method isAfterDate(), specifically, returns true if the first date is greater than second date. Below, date_angular.js:

其他方式——“从头开始”:(AngularJS 中的示例)。具体而言,如果第一个日期大于第二个日期,则方法 isAfterDate() 返回 true。下面,date_angular.js:

    var DateModule = angular.module("dates", []);
    DateModule.controller("dates", function($scope){

    $scope.filtros = {};
    $scope.filtros.data_first = null;
    $scope.filtros.data_second = null;

      $scope.isAfterDate = function(){
        data_first_day = $scope.filtros.data_first.split("/")[0];
        data_first_month = $scope.filtros.data_first.split("/")[1];
        data_first_year = $scope.filtros.data_first.split("/")[2];

        data_second_day = $scope.filtros.data_second.split("/")[0];
        data_second_month = $scope.filtros.data_second.split("/")[1];
        data_second_year = $scope.filtros.data_second.split("/")[2];

      if(data_first_year > data_second_year){
        return true;
      }else if (data_first_year == data_second_year){
          if((data_first_month > data_second_month)){
            return true;
          }else if ((data_first_month < data_second_month)) {
            return false;
          }else{
            if(data_first_day == data_second_day){
              return false;
            }else if (data_first_day > data_second_day){
              return true;
            }else{
              return false;
            }
          }
      }else{
        return false;
      }
    }

     $scope.submit = function() {
        if (this.isAfterDate()){
          alert("The first date is grater than the second date");
        }else{
          $("#form_date").submit();
        }
      }

    });

        RelatoriosModule.directive("datepicker", function () {
          return {
          restrict: "A",
          require: "ngModel",
          link: function (scope, elem, attrs, ngModelCtrl) {
          var updateModel = function (dateText) {
            scope.$apply(function () {
              ngModelCtrl.$setViewValue(dateText);
            });
          };
          var options = {
            dateFormat: "dd/mm/yy",
            onSelect: function (dateText) {
              updateModel(dateText);
            }
          };
          elem.datepicker(options);
        }
      }
    });

For other comparisons: only adjust the method.

对于其他比较:仅调整方法。

In the form (form.html), if you are using AngularJS, you can add it in your archive. Below, form.html:

在表单 (form.html) 中,如果您使用的是 AngularJS,则可以将其添加到您的存档中。下面,form.html:

<div ng-app="dates" class="section-one">
  <div ng-controller="dates" class="section">
    <form method="get" action="dates/dates" id="form_date">
    <div class="form-container--linha">
      <div class="field-3">
        <label for="data_first">first date: </label>
        <input id="data_first" type="text" name="data_first" ng-model="filtros.data_first" datepicker/>
      </div>
      <div class="field-3">
        <label for="data_second">second date: </label>
        <input id="data_second" type="text" name="data_second" ng-model="filtros.data_second" datepicker/>
      </div>
    </div>
    <div class="actions">
     <button class="bt-principal" type="button" ng-click="submit()">submit</button>
   </div>
  <form>
</div>
</div>