在angularjs datepicker比較日期字段

我想比較兩個輸入文本字段，附有datepicker角度ui。在angularjs datepicker比較日期字段

這兩個字段的開始日期和結束日期爲http://jsfiddle.net/iamkhush/8Rezs/23/。

我試圖在ng-change上附加這個函數，但實現它不會工作，因爲datepicker不允許它。

$scope.datechange = function(){ 
    if($scope.enddt < $scope.startdt){ 
     $scope.enddt = ''; 
    };

我無法找到如何覆蓋該指令，如果這是必需的。另外我希望datepicker應該隱藏輸入字段不聚焦。

來源

2013-07-20 iamkhush

爲了比較日期，稍微修改了小提琴。看看這fiddle。更改如下：

$scope.$watch('startdt', function(newval, oldval){ 
    if($scope.enddt < $scope.startdt) { 
     $scope.enddt = ''; 
    }; 
}); 

$scope.$watch('enddt', function(newval, oldval){ 
    if($scope.enddt < $scope.startdt) { 
     $scope.enddt = ''; 
    }; 
});

我曾冒昧禁用文本字段，否則用戶可以在文本字段中輸入無效日期。此外，邏輯的方式是，如果您輸入的startDate低於endDate，並隨後將startDate更改爲endDate之後，則endDate將被重置。 IOW，開始日期控制着一切。請根據您的需求進行更改。

此外，要根據文本字段顯示/隱藏，請查看angular-ui中的下拉指令。我還沒有把它包括在小提琴中，但它應該是可行的，使用下拉和日期選擇器的組合。

來源

2013-07-20 14:15:19 rajasaur

嘿，它的工作:)，但我可以看到你的代碼是類似於我曾經嘗試過的。我剛剛檢查過，如果我只是使用第二個手錶功能，它不起作用。你能解釋一下嗎？ – iamkhush

2 $手錶的組合使得如果您更改了兩個日期選擇器中的任何一個，另一個也被驗證。什麼不工作，如果你只是使用第二個功能。 – rajasaur

那麼，邏輯沒有早點工作，但現在它奇蹟般地。 – iamkhush

遲到了一個答案，但如果你只是想比較日期使用角度UI日期時間選擇器，你可以使用下面的指令，我已經創建它比較日期值使用moment.js。這個指令需要moment.js文件，但你甚至可以沒有它，但peronally我認爲moment.js是偉大的JavaScript日期函數。有您比較日期的指令如下

mainApp.directive("dateGreaterAndEqual", function() { 
    return { 
     restrict: 'A', // only activate on element attribute 
     require: '?ngModel', // get a hold of NgModelController 

     link: function (scope, elem, attrs, ngModel) { 
      if (!ngModel) return; // do nothing if no ng-model 

      // watch own value and re-validate on change 
      scope.$watch(attrs.ngModel, function() { 
       validate(); 
      }); 

      // observe the other value and re-validate on change 
      attrs.$observe('dateGreaterAndEqual', function (val) { 
       validate(); 
      }); 

      var validate = function() { 
       // values 
       var dateTo = angular.isDefined(ngModel.$viewValue) === true && !_.isNull(ngModel.$viewValue) ? moment(ngModel.$viewValue).toDate() : null; 
       var dateFrom = attrs.dateGreaterAndEqual !== "" ? moment(attrs.dateGreaterAndEqual.replace('"', '').replace('\\', '').replace('"', '')).toDate() : null; 
       //passing date with braces around it causes and issue therfore we need to use replace 

      }; 
     } 
    } 

});

dateTo和dateFrom是您需要的值。你需要下面的HTML標記使用它

      <p class="input-group"> 
          <input type="text" class="form-control" data-datepicker-popup="{{Model.DateFormat}}" 
            ng-model="Model.ProcedureDateTo" 
            data-is-open="openedTo" data-min-date="Model.MinDate" 
            data-max-date="Model.MaxDate" 
            data-datepicker-options="dateOptions" data-date-disabled="disabled(date, mode)" 
            ng-required="false" data-close-text="{{Close}}" data-date-greater-and-equal="{{Model.ProcedureDateFrom}}" /> 
          <span class="input-group-btn"> 
           <button type="button" class="btn btn-default" ng-click="openTo($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
          </span> 
         </p>

在此行的關鍵是

數據日期更大和平等=「{{Model.ProcedureDateFrom}}」，它獲得通過，以指令進行比較。

來源

2014-11-20 01:05:29

在angularjs datepicker比較日期字段

回答

相關問題