Question

我目前正在使用MEAN开发网站。在这个网站中，我使用的是html5 datepicker，但由于某些浏览器不支持，我使用jquery datepicker作为后备并成功设法使其工作。

我想要的另一件事是，如果用户选择的日期有效，则显示错误消息。如果日期在1900-01-01和当前日期之间，则日期有效。

现在，问题是每当我第一次选择日期时，即使我选择了有效日期，我也会收到错误消息。在第二次选择有效日期时，错误消息将消失。在第三次尝试时，我选择了一个无效的日期，但错误没有显示。在第四次尝试时，我选择了一个有效的日期但显示错误。为简化起见，验证适用于先前的输入，而不适用于当前输入。

以下是控制器上的代码：

var elem = document.createElement('input');
elem.setAttribute('type', 'date');
if ( elem.type === 'text' ) {
  $('#contactBirthdate').datepicker({
    dateFormat: "yy-mm-dd"
  });
}

$scope.checkDate = function() {
  console.log('Entered check date funtion');
  var now = new Date();
  var minDate = new Date('1900-01-01');
  var inputDate;
  if ( elem.type === 'text' ) {
    $scope.appointment.birthday =  new Date($( "#contactBirthdate" ).val());
    console.log('input date not supported');
    inputDate = new Date($scope.appointment.birthday);
  } else {
    inputDate = new Date($scope.appointment.birthday);
  }
  console.log('inputDate ' + inputDate);
  if (inputDate < now && inputDate > minDate) {
    $scope.isValidDate = true;
  } else {
    $scope.isValidDate = false;
  }
  console.log($scope.isValidDate);
};

在我的 HTML

中

<div class="form-field">
   <input name="contactBirthdate" type="date" min="1900-01-01" max="{{minAge | date: 'yyyy-MM-dd'}}" id="contactBirthdate" placeholder="Your Birthdate"
    value="" class="full-width" ng-model="appointment.birthday" required="" step="1" ng-blur="checkDate()" onkeydown="return false">
   <label ng-show="contactForm.contactBirthdate.$touched && !isValidDate" id="contactName-error" class="error" for="contactBirthdate">
    Invalid Birthdate</label>
 </div>

我真的希望有人可以帮我这个。

Datepicker验证在第一次尝试时无法运行

0 个答案: