Angularjs Startdatum und Enddatum Validierungen

Question

Ich bin völlig neu in Angularjs und versuche, 2 Szenarien zu validieren. Ich habe 2 Textfelder, eines mit Startdatum und das andere mit Enddatum. Ich überprüfe

1. Validierungsfehler auf UI anzeigen, wenn Startdatum nicht größer als oder gleich heute ist. Es sollte heute oder jeden Tag nach heute sein.
2. Validierungsfehler auf der Benutzeroberfläche anzeigen, wenn das Startdatum größer als das Enddatum ist. Das Enddatum sollte größer sein als das Startdatum.

Ich versuchte den folgenden Code, der nicht funktioniert hat. Irgendwelche Vorschläge bitte.

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; 
    } 

    }; 

• Ich habe Eingabetyp als Text für beide Datum controls.I ist mit Bootstrap-Datumsauswahl.

Answer 1

Sie die Logik auf dem ersten Bit umgekehrt, und Sie haben ein neues Datum aus startdate zu konstruieren, um den heutigen Datum zu vergleichen. Außerdem haben Sie curDate auf den Bereich gesetzt, $scope.curDate = new Date(), aber dann haben Sie es als curDate ohne die $scope referenziert, so war es undefiniert. Schließlich müssen Sie auch stateDate und endDate auf ein Datum umwandeln. Sonst vergleicht man nur 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; 
    } 
}; 

Arbeitsbeispiel: http://jsfiddle.net/peceLm14/

Answer 2

Es sieht aus wie Sie referenzieren curDate, die undefiniert ist. Ändern Sie die Bedingung zu if (startDate < $scope.curDate). Siehe Geige zum Beispiel Arbeits 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'; 
    return false; 
    } 

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

Answer 3

$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 
}; 
function GetFormattedFromDates(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 

}; 
function GetFormattedToDates(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; 
    } 

} 

Answer 4

prüfen diese link und es ist klar