Javascript Angularjs 开始日期和结束日期验证

Angularjs start date and end date validations

提问by Kurkula

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

我对 Angularjs 完全陌生，并试图验证 2 个场景。我有 2 个文本框，一个是开始日期，另一个是结束日期。我正在查

1. Show validation error on UI if start date is not greater than or equal to today. It should be today or any day after today.
2. Show validation error on UI if start date is greater than end date. End date should be greater than start date.

1. 如果开始日期不大于或等于今天，则在 UI 上显示验证错误。应该是今天或今天之后的任何一天。
2. 如果开始日期大于结束日期，则在 UI 上显示验证错误。结束日期应大于开始日期。

I tried the below code which did not work. Any suggestions please.

我尝试了下面的代码，但没有用。请提出任何建议。

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

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

  };

• I have input type as text for both date controls.I am using bootstrap date picker.

• 我有两个日期控件的输入类型作为文本。我正在使用引导程序日期选择器。

回答by Preston Van Loon

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 curDatewithout the $scopeso it was undefined. Lastly, you need to cast stateDateand endDateto a date as well. Otherwise you're just comparing strings.

您在第一位上颠倒了逻辑，您必须从 startDate 构建一个新日期以与今天的日期进行比较。此外，您将 curDate 设置为范围，$scope.curDate = new Date()但随后您将其引用为curDate没有 ，$scope所以它是未定义的。最后，您还需要投射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;
    }
};

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

工作示例：http: //jsfiddle.net/peceLm14/

回答by Matt

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

看起来您正在引用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;
  }
};

回答by Sujatha

Check this linkand it is explained clearly

检查此链接，它解释清楚

回答by haleel

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

}