是否可以知道输入类型 = datetime-local 是否已填充一半？答案

【问题标题】：Is it possible to know if an input type = datetime-local is halfway filled?是否可以知道输入类型 = datetime-local 是否已填充一半？
【发布时间】：2016-11-28 19:42:36
【问题描述】：

是否可以知道输入类型 = datetime-local 是否已填充一半？例如，如果只填写日期或时间？

<input type="datetime-local" class="form-control input-lg" id="dueDate" 
ng-model="jobDueDate" min="{{currentMin | date:'yyyy-MM-ddTHH:mm'}}" 
placeholder="Due Date" >

输入标签的元素对象值无论是空的还是半满的都是空的。

var valuedate = document.getElementById('dueDate');
console.log(valuedate.value());

Date.parse 在这两种情况下都返回 NaN。有没有可能的解决方案？如果有帮助的话，我正在使用 Jquery 和 AngularJS。随意使用其他输入类型（没有额外的库）发布更清洁的解决方案。目的是让用户填写这两个字段。

编辑：字段可以留空或完全填充。我需要知道它是否已填满一半，以便我可以提示用户或自己计算所需的日期。

【问题讨论】：

你为什么要这个？
带有日期和时间信息的截止日期。我总是可以有两个输入标签，但我想看看我是否可以提示用户完成他/她开始的内容，或者我可以在控制器代码中自动完成。
所以只检查有效性状态。这里没什么特别的。您有min 约束，只需检查<ngModelController>.$error.min。
console.log($scope.createJobForm.jobDueDate.$error) 返回一个空对象。 createJobForm 是表单的名称，jobDueDate 是输入标签的名称。我做错了吗？
我已经检查了 jQuery 和 AngularJS 中输入元素对象的所有属性和方法，以获取中途填充日期和空日期，但没有发现有用的差异。如果我错了，请纠正我。

标签： javascript jquery angularjs

【解决方案1】：

您可以通过以下方式检测半填充字段：

document.querySelector('#dueDate').validity.badInput

【讨论】：

【解决方案2】：

好吧，除了我不知道你需要检查它是否已填满一半之外，我真的怀疑是否有一种方法可以在没有一些骇人听闻的解决方案的情况下做到这一点。

但是，如果你想简化事情，你可以使用ngMessages directive 来检查它是否完成。

查看这个简单的演示。

(function() {
  angular
    .module('app', ['ngMessages'])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.currentMin = new Date(); // Just an example
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form role="form" name="form" novalidate>
    <div class="col-md-12">
      <div class="form-group" ng-class="{ 'has-error' : form.dueDate.$dirty && form.dueDate.$invalid }">
        <label for="dueDate">Local date time</label>
        <input type="datetime-local" class="form-control input-lg" id="dueDate" name="dueDate" ng-model="jobDueDate" min="{{currentMin | date:'yyyy-MM-ddTHH:mm'}}" placeholder="Due Date" required>
        <div class="help-block" ng-messages="form.dueDate.$error" ng-if="form.dueDate.$dirty">
          <p ng-message="required">This field is required</p>
          <p ng-message="datetimelocal">This needs to be a valid datetime</p>
        </div>
      </div>
    </div>
    <pre ng-bind="form.dueDate | json"></pre>
  </form>
</body>

</html>

我建议您查看此tutorial。

希望对你有帮助！

【讨论】：