Angularjs start date and end date validations

Kurkula

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.
Preston Van Loon

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Start Date and End Date in AngularJS

From Dev

angularjs - datepicker popup opens both in start date and end date

From Dev

Start Date and End Date in Bootstrap

From Dev

Aggregate with a start and end of date

From Dev

Date difference between end date to start date

From Dev

Start and end date from date range

From Dev

Start Date and End Date Of current month in MySql?

From Dev

JQuery - end date less than start date

From Dev

Qml Calendar - selecting Start Date and End Date

From Dev

Qml Calendar - selecting Start Date and End Date

From Dev

end date selection based on start date in laravel

From Dev

Date generate from start to end date in java

From Dev

Kendo UI Scheduler Start Date & End Date

From Dev

Start and end date from date range

From Dev

start date and end date between two dates

From Dev

set end Date after select start date

From Dev

Create vector of dates by start date and end date

From Dev

time format for Start date, End date - SSRS

From Java

javascript: end and start DATE control

From Dev

How to get start and end date

From Dev

Resampling with start and end date columns

From Dev

If Statement to determine start and end date

From Dev

MySQL - Comparing start and end date

From Dev

Start and End Dayof a selected date

From Dev

Date time picker validations

From Dev

Pandas date_range starting from the end date to start date

From Dev

Check if date falls between previous row start date and end date

From Dev

Python Selenium Select date in calendar for start date and end date

From Dev

How to show date between start date and end date in ms access