在输入日期字段中输入合法日期之前,如何禁用提交按钮?
How can I disable a Submit button, until after legitimate date is entered in an input date field?
我有一个用作过滤器的表单。这是日期输入字段的代码。
<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 是我们公司首选的浏览器。
您需要使用 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>
我有一个用作过滤器的表单。这是日期输入字段的代码。
<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 是我们公司首选的浏览器。
您需要使用 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>