在输入日期字段中输入合法日期之前，如何禁用提交按钮？

Question

我有一个用作过滤器的表单。这是日期输入字段的代码。

<label>Date:</label>
<input type="text" id="dateFilter"
       ng-model="gridFilters.dateFilter"
       placeholder="MM/DD/YYYY"
       ng-disabled="loadingData" />
<span class="glyphicon glyphicon-calendar" style="width: 30px"></span>

当 angular 控制器初始化时，gridFilters.dateFilter 值设置为 undefined 并且不应默认为任何值。这是正确的行为。

这是我的提交按钮的代码。我希望该按钮在用户 selects/enters 有效日期之前保持禁用状态。

<button type="button"
        class="btn btn-success pull-right"
        style="top: -5px; margin-left: 20px"
        ng-click="filter()"
        ng-enabled="gridFilters.dateFilter!== null && gridFilters.dateFilter!== undefined && Date.parse(gridFilters.dateFilter)"
        ng-hide="session.Status !== 0">
    Search
</button>

如您所见，我已多次尝试检查 gridFilters.dateFilter 值。 None 的作品。具体来说，当我加载页面时，我的按钮被启用，就好像在选择器中输入了正确的日期一样。我如何测试日期值是否实际上是一个日期？此外，这必须在 Internet Explorer 中工作。我怀疑这会有所作为，但 IE 是我们公司首选的浏览器。

Answer 1

您需要使用 ng-disabled - 没有名为 enabled 的 HTML 属性。

然后试试这个：

<button type="button"
        class="btn btn-success pull-right"
        style="top: -5px; margin-left: 20px"
        ng-click="filter()"
        ng-disabled="gridFilters.dateFilter === null || gridFilters.dateFilter === undefined || Date.parse(gridFilters.dateFilter)"
        ng-hide="session.Status !== 0">
    Search
</button>

这个 ng-disabled="gridFilters.dateFilter === null || gridFilters.dateFilter === undefined" 100% 有效

但是对于 Date.parse(gridFilters.dateFilter) 我不确定它是否有效。

另一种方法是：

<form name="dataForm" novalidate ng-submit="submitForm()">
   <input type="date" name="date" class="form-control" required 
          ng-model="gridFilters.dateFilter">
   <button type="submit"
           class="btn btn-success pull-right"
           style="top: -5px; margin-left: 20px"
           ng-click="filter()"
           ng-disabled="dataForm.$invalid"
           ng-hide="session.Status !== 0">
      Search
   </button>
</form>

在输入日期字段中输入合法日期之前，如何禁用提交按钮？

How can I disable a Submit button, until after legitimate date is entered in an input date field?

html

angularjs

internet-explorer

html-input