Using $scope value to compare dates using momentjs

Question

I am currently using a select option to generate months and years using the angular attribute ng-repeat to gather data for credit card expiration dates. I would like to return the value of the month and year after they are concatenated into one string and compare the string to today's date using momentjs. When doing this, month and year are returning as an invalid date. Please see my example below:

HTML

<select id="expMonth" class="form-control" ng-model="expMonth" ng-change="checkDate()">
   <option value="" disabled>Month</option>
   <option value="{{ month }}" ng-repeat="month in months">{{ month }}</option>
</select>

 <select id="expYear" class="form-control" ng-model="expYear" ng-change="checkDate()">
    <option value="" disabled>Year</option>
    <option value="{{ year }}" ng-repeat="year in years">{{ year }}</option>
 </select>

Javascript/Angular

$scope.months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
$scope.years = [];
var currentYear = new Date().getFullYear ();
for ( var i = currentYear; i <= new Date ().getFullYear () + 10; i++ ) $scope.years.push ( i );

$scope.checkDate = function() {
    var expDate = $scope.expMonth.toString() + $scope.expYear.toString();
    if (expDate < moment().format('MMYYYY')) {
      console.log('please enter an invalid date');
    } else {
      console.log('this date is valid')
    }
}

I believe the dates are returning as a string and I am not sure how to convert it so I can compare it with today's date using the moment.format('MMYYYY'). Any help would be awesome.

Answer 1

You are trying to compare if one string is less than another string which will not work. You have two options:

1. Compare the months and the years separately
2. Use moment's isBefore method to compare the dates

Separate Comparison:

$scope.months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
$scope.years = [];
var currentMonth = new Date().getMonth();
var currentYear = new Date().getFullYear();
for (var i = currentYear; i <= new Date().getFullYear() + 10; i++) $scope.years.push(i);

$scope.checkDate = function() {
  if (!($scope.expMonth && $scope.expYear)) return;
  if ($scope.expMonth <= currentMonth && $scope.expYear <= currentYear) {
    console.log('please enter an valid date');
  } else {
    console.log('this date is valid');
  }
}

Moment isBefore

$scope.months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
$scope.years = [];
var currentMonth = new Date().getMonth();
var currentYear = new Date().getFullYear();
for (var i = currentYear; i <= new Date().getFullYear() + 10; i++) $scope.years.push(i);

$scope.checkDate = function() {
  if (!($scope.expMonth && $scope.expYear)) return;
  var expDate = $scope.expMonth.toString() + $scope.expYear.toString();
  if (moment(expDate, 'MMYYYY').isBefore()) {
    console.log('please enter an valid date');
  } else {
    console.log('this date is valid');
  }
}