【问题标题】:Angular ui: bootstrap datepicket input validationAngular ui:引导日期选择器输入验证
【发布时间】:2016-12-27 11:25:31
【问题描述】:

我正在使用这个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 的日期选择器,请告诉我。

【问题讨论】:

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


    【解决方案1】:

    我必须更新到 angular-ui 1.3.3,然后我必须给日期输入一个名称“datepicker”和表单名称“frm”,然后

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

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

    【讨论】:

    • 我暂时接受我的答案,如果有人有更好的答案,我会接受他的答案
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-25
    • 2015-06-11
    • 2014-10-21
    • 2015-09-03
    • 1970-01-01
    • 2019-08-10
    • 1970-01-01
    相关资源
    最近更新 更多