1 pièce(s) jointe(s)
Datepicker ne fonctionne pas
Bonjour,
Je tente d'utiliser un datepicker dans une (petite) application AngularJs, mais lorsque je clique sur l'icone, rien ne se passe, pourtant je passe bien dans la fonction associée au clic.
Il doit y avoir une erreur quelque part, mais où ?
Précision, j'ai fait fonctionner la démo présentée là : https://angular-ui.github.io/bootstrap/
Voici mon environnement.
Une copie d'écran :
Pièce jointe 189025
Les référencement des scripts et css dans index.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="lib/css/employees.css" rel="stylesheet">
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script src="lib/jquery/jquery-2.1.3.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap/js/ui-bootstrap-tpls.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/angular/angular-resource.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.js"></script>
<script type="text/javascript" src="script/app.js"></script>
<script type="text/javascript" src="script/services.js"></script>
<script type="text/javascript" src="script/controllers.js"></script> |
Remarque : on est sur la version 1.4.5 d'angularjs et 3.2.0 pour bootstrap.
Le code du contrôleur :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| controllers.controller('employeeCtrl', ['$route', 'EmployeesRest', '$routeParams', '$location', function ($route, EmployeesRest, $routeParams, $location) {
var vm = this;
vm.pageTitle = " an Employee";
vm.employee_id = $routeParams.id;
if (vm.employee_id)
vm.pageTitle = "Updating" + vm.pageTitle;
else
vm.pageTitle = "Adding" + vm.pageTitle;
vm.Dateformat = 'yyyy-MM-dd';
vm.datePickerOpened = false;
vm.openDatePicker = function() {
vm.datePickerOpened = true;
};
EmployeesRest.getDepartments().success(function (data) {
vm.departments = data;
});
EmployeesRest.getJobs().success(function (data) {
vm.jobs = data;
});
. . . |
Le template employee.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div class="well">
<div class="text-center titre">
<h2>{{vm.pageTitle}}</h2>
</div>
<form class="form-horizontal" role="form" >
<div class="form-group">
<label class="col-sm-3 control-label">Name : </label>
<div class="col-sm-6 col-md-5">
<input type="text" name="name" ng-model="vm.employee.name" class="form-control" placeholder="Employee's name" required autofocus>
</div>
</div>
. . .
<div class="form-group">
<label class="col-sm-3 control-label">Hire Date : </label>
<div class="col-sm-6 col-md-2">
<p class="input-group">
<input type="text" class="form-control" is-open="vm.datePickerOpened" datepicker-popup="yyyy-MM-dd"
ng-model="vm.employee.hiredate" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
. . . |
