web-dev-qa-db-fra.com

Angularjs dates de début et de fin de validations

Je suis complètement nouveau chez Angularjs et j'essaie de valider 2 scénarios. J'ai 2 zones de texte une avec la date de début et l'autre avec la date de fin. je vérifie

  1. Afficher l'erreur de validation sur l'interface utilisateur si la date de début n'est pas supérieure ou égale à aujourd'hui. Ce devrait être aujourd'hui ou n'importe quel jour après aujourd'hui.
  2. Afficher une erreur de validation sur l'interface utilisateur si la date de début est supérieure à la date de fin. La date de fin doit être supérieure à la date de début.

J'ai essayé le code ci-dessous qui n'a pas fonctionné. Toutes les suggestions s'il vous plaît.

Code HTML

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

code js

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

  };
  • J'ai le type d'entrée en tant que texte pour les deux contrôles de date. J'utilise le sélecteur de date bootstrap.
javascriptangularjsvalidationdate
5
Kurkula

La logique est inversée sur le premier bit et vous devez construire une nouvelle date à partir de startDate pour la comparer à la date du jour. De plus, vous définissez curDate sur la portée, $scope.curDate = new Date(), mais vous le référeniez comme suit: curDate sans le $scope, de sorte qu'il était indéfini. Enfin, vous devez attribuer également stateDate et endDate à une date. Sinon, vous ne faites que comparer des chaînes.

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

Exemple de travail: http://jsfiddle.net/peceLm14/

8
Preston Van Loon

Cochez cette link et il est expliqué clairement

1
Sujatha

On dirait que vous faites référence à curDate qui n'est pas défini. Remplacez la condition par if (startDate < $scope.curDate). Voir le violon pour des exemples de travail 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;
  }
};
1
Matt
$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;
    }

}
0
haleel