web-dev-qa-db-ja.com

Angularjsの開始日と終了日の検証

私はAngularjsを完全に初めて使用し、2つのシナリオを検証しようとしています。 2つのテキストボックスがあり、1つは開始日、もう1つは終了日です。私はチェックしています

  1. 開始日が今日以下の場合、UIに検証エラーを表示します。それは今日または今日の翌日でなければなりません。
  2. 開始日が終了日より大きい場合、UIに検証エラーを表示します。終了日は開始日より後にしてください。

動作しない以下のコードを試してみました。何か提案してください。

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>

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

  };
  • 両方の日付コントロールのテキストとして入力タイプがあります。bootstrap日付ピッカーを使用しています。
javascriptangularjsvalidationdate
6
Kurkula

最初のビットでロジックが逆になり、今日の日付と比較するためにstartDateから新しい日付を作成する必要があります。また、curDateをスコープ$scope.curDate = new Date()に設定しましたが、$scopeなしでcurDateとして参照していたため、未定義でした。最後に、stateDateとendDateも日付にキャストする必要があります。それ以外の場合は、文字列を比較するだけです。

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

作業例： http://jsfiddle.net/peceLm14/

9
Preston Van Loon

これをチェックしてください link そしてそれは明確に説明されています

1
Sujatha

未定義のcurDateを参照しているようです。条件をif (startDate < $scope.curDate)に変更します。実際の例についてはフィドルを参照してください 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