Angularjs开始日期和结束日期验证 [英] Angularjs start date and end date validations

问题描述

我对Angularjs完全是新的，并试图验证2个场景。我有2个文本框，一个开始日期，另一个与结束日期。我正在检查

1. 如果开始日期不大于或等于今天，则在UI上显示验证错误。它应该是今天或今天之后的任何一天。


2. 如果开始日期大于结束日期，则在UI上显示验证错误。结束日期应该大于开始日期。

我尝试了以下不起作用的代码。任何建议请。

Html代码

 < label for = endDateclass =control-label>开始日期：< / label> 
< div> 
< input type =textclass =form-control
 id =startDateng-model =startDate/> 
< / div> 
 
< label for =textclass =control-label>结束日期：< / label> 
< div> 
< input type =textclass =form-control
 id =endDateng-model =endDate
 ng-change ='checkErr（startDate，endDate） '/> 
 
< / div> 
 
< span> {{errMessage}}< / span> 
  

js代码

 code> $ scope.checkErr = function（startDate，endDate）{
 $ scope.errMessage =''; 
 $ scope.curDate = new Date（）; 
 
 if（startDate< endDate）{
 $ scope.errMessage ='结束日期应该比开始日期更好; 
返回false; 
} 
 if（startDate< curDate）{
 $ scope.errMessage ='开始日期不应该在今天之前。 
返回false; 
} 
 
}; 
  

• 我的输入类型为两个日期控件的文本。我正在使用引导日期选择器。

解决方案

您的逻辑颠倒了第一位，你必须从startDate构造一个新的日期，以比较今天的日期。另外，您将curDate设置为范围， $ scope.curDate = new Date（），但是您将它引用为 curDate 没有 $ scope 所以没有定义。最后，您还需要将 stateDate 和 endDate 转换为日期。否则你只是比较字符串。

  $ scope.checkErr = function（startDate，endDate）{
 $ scope .errMessage =''; 
 var curDate = new Date（）; 
 
 if（new Date（startDate）> new Date（endDate））{
 $ scope.errMessage ='结束日期应大于开始日期'; 
返回false; 
} 
 if（new Date（startDate）< curDate）{
 $ scope.errMessage ='开始日期不应该在今天之前。 
返回false; 
} 
}; 
  

工作示例： http://jsfiddle.net/peceLm14/

I am completely New to Angularjs and trying to validate 2 scenarios. I have 2 text boxes one with start date and the other with end date. I am checking

1. Show validation error on UI if start date is not greater than or equal to today. It should be today or any day after today.
2. Show validation error on UI if start date is greater than end date. End date should be greater than start date.

I tried the below code which did not work. Any suggestions please.

Html Code

<label for="endDate" class="control-label">Start Date:</label>
<div>
    <input type="text" class="form-control" 
           id="startDate" ng-model="startDate" />
</div>

<label for="text" class="control-label">End Date:</label>
<div>
    <input type="text" class="form-control" 
           id="endDate" ng-model="endDate" 
            ng-change='checkErr(startDate,endDate)' />

</div>

<span>{{errMessage}}</span>

js code

$scope.checkErr = function(startDate,endDate){
    $scope.errMessage = '';
    $scope.curDate = new Date();

    if(startDate < endDate){
      $scope.errMessage = 'End Date should be greate than start date';
      return false;
    }
    if(startDate < curDate){
       $scope.errMessage = 'Start date should not be before today.';
       return false;
    }

  };

• I have input type as text for both date controls.I am using bootstrap date picker.

解决方案

You have the logic reversed on the first bit and you have to construct a new date from startDate to compare to today's date. Also you set curDate to the scope, $scope.curDate = new Date() but then you were referencing it as curDate without the $scope so it was undefined. Lastly, you need to cast stateDate and endDate to a date as well. Otherwise you're just comparing strings.

$scope.checkErr = function(startDate,endDate) {
    $scope.errMessage = '';
    var curDate = new Date();

    if(new Date(startDate) > new Date(endDate)){
      $scope.errMessage = 'End Date should be greater than start date';
      return false;
    }
    if(new Date(startDate) < curDate){
       $scope.errMessage = 'Start date should not be before today.';
       return false;
    }
};

Working example: http://jsfiddle.net/peceLm14/

这篇关于Angularjs开始日期和结束日期验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！