是否可以知道输入类型= datetime-local是否已中途填充?

时间:2016-07-25 12:46:17

标签: javascript jquery angularjs

是否可以知道输入类型= 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&amp; AngularJS,如果那些可以帮助。随意使用其他输入类型(无额外的库)发布更清晰的解决方案。目的是让用户填写两个字段。

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

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

嗯,除了我不知道你需要检查它是否已经中途填满,我真的怀疑是否有办法在没有一些黑客解决方案的情况下做到这一点。

但是,如果您想简化某些事情,可以使用ngMessages 指令来检查它是否完成

检查这个简单的演示

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

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

  function MainCtrl($scope) {
    $scope.currentMin = new Date(); // Just an example
  }
})();
&#13;
<!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>
&#13;
&#13;
&#13;

我建议你查看tutorial

我希望它有所帮助!!