如何检查日期输入的有效性？答案

【问题标题】：How can i check date input validity?如何检查日期输入的有效性？
【发布时间】：2016-05-02 15:21:01
【问题描述】：

我正在使用AngularJS 和Onsen-ui 创建一个移动页面，其中包含用户应填写有效日期的输入。这是我的代码：

HTML：

<input type="date" autofocus class="search-input" name="dateInput" ng-model="date" ng-keyup="checkDate()"/>

JS：

    function checkDateFn() {
      if (Object.prototype.toString.call($scope.date) === '[object Date]') {
        // it is a date
        if (isNaN($scope.date.getTime())) {  // d.valueOf() could also work
          // date is not valid
        }
        else {
          // date is valid
          // DO SOMETHING
        }
      }
      else {
        // not a date
      }
    }

但是它没有得到一个有效的日期（我不知道为什么）。我也尝试使用 HTML form，我写了这个：

    <form name="dateForm">
      <input type="date" autofocus class="search-input" name="dateInput" ng-model="date"/>
    </form>

但在这种情况下，当dateForm.dateInput.$valid 发生时，我不知道如何触发函数。

你有更好的方法来达到我的目的吗？

【问题讨论】：

它很脏，但你总是可以设置一个$watch( 'dateForm.dateInput.$valid', watchHandler) 。不过可能有更简单的方法。
我不知道为什么，但watchHandler 从一开始就在第一页加载时触发。 dateForm.dateInput.$valid 是否检查日期有效性或仅检查该字段是否已填写？
您可以为此使用 ng-pattern。
dateForm.dateInput.$valid在输入值改变时检查有效性，看这个plunker example
是的，但它应该仅在有效时触发该功能，而不是在每次更改时触发。我说的对吗？

标签： angularjs forms validation date input

【解决方案1】：

您可以在dateForm.$invalid之前禁用表单提交按钮

因此，您可以在提交按钮上添加ng-disabled="dateForm.$invalid"

【讨论】：

那么您希望何时进行验证？
当用户插入有效日期时。
是的，但是您想通过验证实现什么目标？您可以显示一些错误消息，直到输入有效，例如 ng-show="dateForm.dateInput.$error"
当验证正常时，我想这样做：$scope.sharedData.docDate = $filter('date')(new Date($scope.date), 'dd/MM/yyyy');
您究竟想对日期做什么？将其发送到服务器或只是在页面的另一部分再次显示？