Angular ui:bootstrap datepicket输入验证

时间:2016-08-20 11:31:52

标签: javascript angularjs datepicker angular-ui-bootstrap angular-ui

我正在使用此datepicker。截至目前,用户可以在输入字段中编写他喜欢的任何内容,这不是我想要的。

我的代码:

session.js

  session.getDateFormat = function() {
            return 'yyyy-MM-dd';
        };

        session.formatDate = function(date) {
            return $filter('date')(date, session.getDateFormat());
        };

Controller.js

vm.dateFormat = session.getDateFormat();
function submit() {
date : session.formatDate(vm.data.date)
 }

代码要长得多,但基本上是关于日期的部分。和HTML

<input type="text" class="form-control" uib-datepicker-popup="{{vm.dateFormat}}" placeholder="{{vm.dateFormat}}" ng-model="vm.data.date" is-open="vm.dateOpened" ng-required="true" ng-disabled="disabled" />

管理员可以选择是否希望getDateFormat接受yyyy-mm-dddd-mm-yyyy等。

我想要的是什么:

  1. 要验证用户是否输入了日期是正确的格式,否则自动清除该字段并显示错误消息以及正确的日期格式作为用户的提示。所有必须在按下提交之前完成。
  2. 显然不允许用户输入字母
  3. 没有硬编码的html正则表达式,我想要检查输入是否与getDateFormat相同,否则清除该字段并显示错误。
  4. 没有Jquery,我不会在整个项目中使用Jquery。
  5. 如果你有任何其他的日期选择器,它可以在不使用Jquery的情况下使用angular和bootstrap,请告诉我。

1 个答案:

答案 0 :(得分:0)

我必须更新到angular-ui 1.3.3然后我必须给日期输入一个名字&#39; datepicker&#39;并形成一个名称&#39; frm&#39;然后

<div ng-if="!frm.datepicker.$error.required"">
<div class="datepicker-error" ng-if="frm.datepicker.$invalid">
some error message
</div></div>

我没有清除该字段,因为如果用户没有完成输入,那么它将无效,因此可能会被清除。如果有人有更好的解决方案,请告诉我。