从日期开始,以角度js进行日期验证

时间:2016-06-04 05:00:40

标签: javascript jquery html angularjs frontend

这是我的代码

<tr ng-show="option == 'Yearly' || option == 'Date'">
  <td>
    <label>From:</label>
  </td>
  <td>
    <input type="date" ng-model="fromdate" id="fromdate" date-picker />
  </td>
  <td>
    <label>To:</label>
  </td>
  <td>
    <input type="date" ng-model="todate" date-picker />
  </td>
</tr>

对于fromdate和todate我有一个jquery日期选择器,我需要禁用结束日期中的所有日期,这比日期更短.....

2 个答案:

答案 0 :(得分:0)

如果您只想设置特定的最短日期,例如今天的日期,您可以将其设置为设置。

https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

如果你有一个简单的方法可以将你的最小日期设置为今天,你可以使用一个变量min =“{{minDate | date:'yyyy-MM-dd'}}”)。请注意,min还将添加本机HTML5约束验证。

理论上这不需要控制器,只需要$ scope.minDate的应用程序设置配置,所有要做的就是注意你的日期在你设置的任何验证字段旁边都不正确,字段而形式验证则是一个完全不同的动物,然后你会问,但我会在上面阅读https://docs.angularjs.org/guide/forms

从长远来看,我不会使用jquery日期选择器并使用本地指令,如https://angular-ui.github.io/bootstrap/日期选择器或角度材料https://material.angularjs.org/latest/demo/datepicker

答案 1 :(得分:0)

我用https://github.com/Eonasdan/bootstrap-datetimepicker 如果您想查看其他插件,以前的minDatemaxDate选项可能对您的用例有用。

设置maxDateminDate的示例用法:

HTML:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

$('#datetimepicker1').datetimepicker({
  maxDate: new Date("6/8/2016"),
  minDate: new Date("6/2/2016")
});

工作Plunker

注意:此插件依赖于bootstrapjquerymomentjs

编辑:

还有一个角度包装指令:https://github.com/diosney/angular-bootstrap-datetimepicker-directive