Angularjs 开始日期和结束日期验证答案

【问题标题】：Angularjs start date and end date validationsAngularjs 开始日期和结束日期验证
【发布时间】：2015-09-29 18:26:07
【问题描述】：

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

如果开始日期不大于或等于今天，则在 UI 上显示验证错误。应该是今天或今天之后的任何一天。
如果开始日期大于结束日期，则在 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;
    }

  };

我将输入类型作为文本用于两个日期控件。我正在使用引导日期选择器。

【问题讨论】：

标签： javascript angularjs validation date

【解决方案1】：

您在第一位反转了逻辑，您必须从 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;
    }
};

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

【讨论】：

代码与您发布的小提琴略有不同。但这有很大帮助。请同步您发布的代码并进行修改，以便对每个人都有用。
谢谢！我忘了在第一个 if 块中投射日期。

【解决方案2】：

您似乎在引用未定义的 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;
  }
};

【讨论】：

【解决方案3】：

查看这个link，解释清楚了

【讨论】：

【解决方案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
};
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;
    }

}

【讨论】：