Question

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

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

所以，前端需要检查条件是如果pickUpDate小于alignFillDate，我们会将alignFillDate增加30天，即我们将pickUpDate增加到下个月（从现在起30天）并显示不同的文本查看

如何使用angular和javascript实现此目的。？我的html和控制器如何更改此日期计算

Answer 1

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

   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;

这是一个可以做你想要做的事情http://plnkr.co/edit/Kq7WA1cBcrwDyxDeBFAL?p=info。

Answer 2

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

以下是执行此操作的过滤器：

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

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

Answer 3

其他方式 - “从头开始”:( 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);
        }
      }
    });

进行其他比较：仅调整方法。

在表单（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>

比较两个日期angularjs

3 个答案: