Angularjs Start Date And End Date Validations

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 Show validation error on UI

Solution 1:

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 = newDate();

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

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

Solution 2:

It looks like you're referencing curDate which is undefined. Change the conditional to if (startDate < $scope.curDate). See fiddle for working example http://jsfiddle.net/4ec3atzk/1/

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

  if (startDate < endDate){
    $scope.errMessage = 'End Date should be greate than start date';
    returnfalse;
  }

  if (new Date(startDate) < $scope.curDate){
    $scope.errMessage = 'Start date should not be before today.';
    returnfalse;
  }
};

Solution 3:

Check this link and it is explained clearly

Solution 4:

$scope.datepickerObjectfromdates = {
    todayLabel: 'Today',
    closeLabel: 'Close',
    setLabel: 'Ok',
    setButtonType : 'button-calm',
    todayButtonType : 'button-calm',
    closeButtonType : 'button-calm',
    inputDate: new Date(),
    mondayFirst: true,
    templateType: 'popup',
    showTodayButton: 'true',
    modalHeaderColor: 'bar-calm',
    modalFooterColor: 'bar-calm',
    callback: function (val) {
        var getdate = GetFormattedFromDates(val);
        $scope.date.FromDates = getdate;
        localStorage.date = $scope.FromDates;

    },
    dateFormat: 'MM-dd-yyyy', //Optional
    closeOnSelect: false, //Optional
};
functionGetFormattedFromDates(val) {
    if(typeof(val)==='undefined')
    {
        $scope.date.FromDates = '';
    }
    else {

        var todayTime = new Date(val);
        var month = todayTime.getMonth() + 1;
        var day = todayTime.getDate();


        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }


        var year = todayTime.getFullYear();
        return day + "/" + month + "/" + year;
    }

}


$scope.datepickerObjecttodates = {

    todayLabel: 'Today',
    closeLabel: 'Close',
    setLabel: 'Ok',
    setButtonType : 'button-calm',
    todayButtonType : 'button-calm',
    closeButtonType : 'button-calm',
    inputDate: new Date(),
    mondayFirst: true,
    templateType: 'popup',
    allowOldDates: false,

    showTodayButton: 'true',
    modalHeaderColor: 'bar-calm',
    modalFooterColor: 'bar-calm',

    callback: function (val) {
        var getdate = GetFormattedToDates(val);
        $scope.date.ToDates = getdate;
        //$scope.date.ToDates = getdate.clear();


    },

    dateFormat: 'dd-MM-yyyy', //Optional
    closeOnSelect: false, //Optional

};
functionGetFormattedToDates(val) {
    if (typeof(val) === 'undefined') {
        $scope.ToDates = '';
    }
    else {
        var todayTime = new Date(val);

        var month = todayTime.getMonth() + 1;
        var day = todayTime.getDate();


        if (day < 10) {
            day = '0' + day;
        }
        if (month < 10) {
            month = '0' + month;
        }
        var year = todayTime.getFullYear();
        return day + "/" + month + "/" + year;
    }

}