Angularjs and bootstrap datetimepicker

Question

I am trying to integrate a datetimepicker into my Angular form validation. Everything works fine so far, but it does not seem to respond to the click of the button to bring up the calendar at all. I have followed the example here : http://mgcrea.github.io/angular-strap/. Here is my code, the most relevant part is here :

<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>

And the whole page looks like this :

    <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" />

Do I need to add something to my app.js? Currently I only have this related to the datetimepicker :

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

EDIT : The issue was as JQuery Guru suggested, I needed to inject the angularstrap directive into my app.js. It now works but the validation does not work as it should at all. It does work when I click on a date in the calendar, but when I manually enter data it does not validate properly. For example, entering text still gives the required validation message, and there is no pattern validation at all.

<

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>

Tiago Roldão · Accepted Answer · 2013-07-26 14:43:44Z

2

You seem to be forgetting to include the dependencies for the datepicker : bootstrap-datepicker.js and bootstrap-datepicker.css

answered Jul 26, 2013 at 14:43

Tiago Roldão

10.7k3 gold badges32 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JQuery Guru · Accepted Answer · 2013-07-27 08:16:31Z

1

You need to inject the angularstrap directive in your apps.js below is the example:

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

Here is the working code:

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

and in left panel click on app.js to see

and also in your HTML page you need added reference for apps.js

<html ng-app="Myapp">

answered Jul 27, 2013 at 8:16

JQuery Guru

6,9631 gold badge35 silver badges40 bronze badges

1 Comment

user517406 Over a year ago

Thanks, that was exactly what I was missing, I figured it out shortly before your post. The other issue I have with this is that the validation does not work as it should do (see edit above). If you have any ideas that would be awesome.

Collectives™ on Stack Overflow

Angularjs and bootstrap datetimepicker

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related