angularjs - Angularjs 和引导日期时间选择器

Question

我正在尝试将 datetimepicker 集成到我的 Angular 表单验证中。到目前为止一切正常，但它似乎根本没有响应单击按钮以调出日历。我在这里遵循了这个例子：http: //mgcrea.github.io/angular-strap/。这是我的代码，最相关的部分在这里：

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
    <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
    <div class="controls">
        <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required>
        <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
        <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
    </div>
</div>

整个页面看起来像这样：

    <h2>Add User</h2>

<form name="form" id="form" class="form-horizontal">
    <div class="control-group" ng-class="{error: form.UserName.$invalid}">
        <label class="control-label" for="UserName">{{'_UserName_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.UserName" id="UserName" name="UserName" title="UserName" required ng-minlength="6" ng-maxlength="20" ng-unique="main.Users.Username" />
            <span ng-show="form.UserName.$dirty && form.UserName.$error.required">{{'_UserNameRequired_' | i18n}}</span>
            <span ng-show="form.UserName.$dirty && form.UserName.$error.minlength">{{'_UserNameLength_' | i18n}}</span>
            <span ng-show="form.UserName.$dirty && form.UserName.$error.maxlength">{{'_UserNameLength_' | i18n}}</span>
            <span ng-show="form.UserName.$dirty && form.UserName.$error.uniqueusername">{{'_UserNameUnique_' | i18n}}</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.FirstName.$invalid}">
        <label class="control-label" for="FirstName">{{'_FirstName_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.FirstName" id="FirstName" name="FirstName" title="FirstName" required ng-minlength="1" ng-maxlength="50" />
            <span ng-show="form.FirstName.$dirty && form.FirstName.$error.required">{{'_FirstNameRequired_' | i18n}}</span>
            <span ng-show="form.FirstName.$dirty && form.FirstName.$error.minlength">{{'_FirstNameLength_' | i18n}}</span>
            <span ng-show="form.FirstName.$dirty && form.FirstName.$error.maxlength">{{'_FirstNameLength_' | i18n}}</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.Surname.$invalid}">
        <label class="control-label" for="FirstName">{{'_Surname_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.Surname" id="Surname" name="Surname" title="Surname" required ng-minlength="1" ng-maxlength="50" />
            <span ng-show="form.Surname.$dirty && form.Surname.$error.required">{{'_SurnameRequired_' | i18n}}</span>
            <span ng-show="form.Surname.$dirty && form.Surname.$error.minlength">{{'_SurnameLength_' | i18n}}</span>
            <span ng-show="form.Surname.$dirty && form.Surname.$error.maxlength">{{'_SurnameLength_' | i18n}}</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.Password.$invalid}">
        <label class="control-label" for="Password">{{'_Password_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.Password" id="Password" name="Password" title="Password" required ng-pattern="/^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/" />
            <span ng-show="form.Password.$dirty && form.Password.$error.required">{{'_PasswordRequired_' | i18n}}</span>
            <span ng-show="form.Password.$dirty && form.Password.$error.pattern">{{'_PasswordLengthAndAlphanumeric_' | i18n}}</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.ConfirmPassword.$invalid}">
        <label class="control-label" for="ConfirmPassword">{{'_ConfirmPassword_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.ConfirmPassword" id="ConfirmPassword" name="ConfirmPassword" title="ConfirmPassword" required ng-pattern="/^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/" match-password="Password" />
            <span ng-show="form.ConfirmPassword.$dirty && form.ConfirmPassword.$error.required">{{'_ConfirmPasswordRequired_' | i18n}}</span>
            <span ng-show="form.ConfirmPassword.$dirty && form.ConfirmPassword.$error.pattern">{{'_PasswordLengthAndAlphanumeric_' | i18n}}</span>
            <span ng-show="form.ConfirmPassword.$dirty && !form.ConfirmPassword.$error.pattern && !form.ConfirmPassword.$error.required
                                                            && form.ConfirmPassword.$error.passwordmatch">{{'_PasswordsMustMatch_' | i18n}}</span>
        </div>
    </div>
    <div class="control-group" ng-class="{error: form.EmailAddress.$invalid}">
        <label class="control-label" for="EmailAddress">{{'_EmailAddress_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.EmailAddress" id="EmailAddress" name="EmailAddress" title="EmailAddress" required ng-pattern="/^(?!.{51})([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$/" ng-unique="main.Users.EmailAddress" />
            <span ng-show="form.EmailAddress.$dirty && form.EmailAddress.$error.required">{{'_EmailAddressRequired_' | i18n}}</span>
            <span ng-show="form.EmailAddress.$dirty && form.EmailAddress.$error.pattern">{{'_EmailAddressInvalid_' | i18n}}</span>
            <span ng-show="form.EmailAddress.$dirty && form.EmailAddress.$error.uniqueemailaddress">{{'_EmailAddressUnique_' | i18n}}</span>
        </div>
    </div>

    <div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
        <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
        <div class="controls">
            <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required>
            <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
            <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
        </div>
    </div>

    <div class="control-group" ng-class="{error: form.City.$invalid}">
        <label class="control-label" for="City">{{'_City_' | i18n}}</label>
        <div class="controls">
            <input type="text" ng-model="user.City" id="City" name="City" title="City" required ng-maxlength="50" />
            <span ng-show="form.City.$dirty && form.City.$error.maxlength">{{'_CityLength_' | i18n}}</span>
        </div>
    </div>
    <div class="form-actions">
        <button ng-show="form.$valid" ng-click="save()" class="btn btn-primary">Add</button>
        <a href="#/" class="btn">Cancel</a>
    </div>
</form>

<script src="../../../Scripts/jquery-1.8.2.js"></script>
<script src="../../../Scripts/jquery-ui-1.8.20.js"></script>
<script src="../../../Scripts/angular-strap.min.js"></script>
<script src="../../../Scripts/bootstrap-datepicker.js"></script>
<link href="../../../Content/bootstrap-datepicker.css" rel="stylesheet" />

我需要在我的 app.js 中添加一些东西吗？目前我只有这个与 datetimepicker 相关：

//You can use the global $strapConfig to set defaults
app.value('$strapConfig', {
datepicker: {
language: 'fr',
format: 'M d, yyyy'
}
});

编辑：问题正如 JQuery Guru 所建议的那样，我需要将 angularstrap 指令注入到我的 app.js 中。它现在可以工作，但验证根本无法正常工作。当我单击日历中的日期时它确实有效，但是当我手动输入数据时它无法正确验证。例如，输入文本仍然会给出所需的验证消息，根本没有模式验证。

<

div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
        <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
        <div class="controls">
            <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required ng-pattern="/^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/">
            <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
            <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
            <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.pattern">{{'_BirthDateInvalid_' | i18n}}</span>
        </div>
    </div>

Answer 1

您似乎忘记包含 datepicker 的依赖项： bootstrap-datepicker.js和bootstrap-datepicker.css

Answer 2

您需要在您的 apps.js 中注入 angularstrap 指令，示例如下：

angular.module('Myapp', ["$strap.directives"]);

这是工作代码：

http://plnkr.co/edit/QAxwgLSWQaYbGzkzeu4g?p=preview

并在左侧面板中单击 app.js 以查看

并且在您的 HTML 页面中，您还需要为 apps.js 添加参考

<html ng-app="Myapp">