Comment implanter un calendrier AngularJS

**Hippocrène** · 18/08/2015, 12h25

Bonjour,

j’aimerais implanter un calendrier en utilisant AngularJS (car je l’utilise déjà). Le problème est que j’ai trouvé un unique calendrier AngularUI Calendar, mais le code est aussi long que d’écrire un select/option en html avec tous les jours mois et années en chiffres

(et ils n’expliquent pas comment l’insérer, sur le site officiel)

Je me suis essayé à ng-repeat avec une boucle for dans un tableau AngularJS, sans succès. J’ai utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
myApp_1.controller('DateCtrl', ['$scope', function ($scope){
	$scope.DateArray = [
		for (var i = 0; i < 31; i++) {
			$scope.a = i
		};
	]
}]);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<html ng-app="myApp_1"> […]
<div class="styled-select" ng-controller="DateCtrl">
				<select type="list" name="date_from_day">
					<option ng-repeat="date in DateArray.a">{{ date }} </option>
				</select>
				</div>
[…]

J’aimerais savoir si il existe un autre calendrier ou une méthode plus simple d’en avoir un sans utiliser une autre bibliothèque.

Invité · 20/10/2015, 21h17

Salut,

j'aurais peut etre une piste mais je ne sais pas si cela peut convenir,
Il est possible d'utiliser le date picker de Bootstrap UI pour angular, puis après tu récupère la date du plug dans ton controleur angularJs(une fois que l'utilisateur a cliqué sur une date), enfin, tu crées un filtre avec la variable date récupérée, qui filtre ton modèle en temps réel.

Pour exemple, voici ma fonction de filtrage par date, si mes souvenirs sont bons, $scope.dt est la date qui provient du plug in BootstrapUi date picker pour Angular :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!--  FILTRE LE MODELE PAR DATE -->
			  $scope.filtreDate = function(candidat) {
					var date = $scope.dt ; 
					var date = $filter('date')(date,'dd-MM-yyyy'); 
					return candidat.dateRdv === date;
				};

Cette fonction qui filtre le modèle par date s'applique ensuite automatiquement dans le ng-repeat, comme ceci (on la reconnait, car elle s'appelle filtreDate):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="CSSTableGenerator " >	
				<tr >
					<th>id</th>
					<th>Photo</th>
					<th>Prénom</th>
					<th>Nom</th>
					<th>Heure</th>
					<th>Evaluer</th>
				</tr>
				<tr ng-repeat="candidat in candidats | filter:query | filter:isActive |filter:filtreDate| orderBy:'heure'" >
					<td>{{candidat.id}}</td>
					<td><img src="{{candidat.photo}}" class="miniphoto"></img></td>
					<td>{{candidat.prenom}}</td>
					<td>{{candidat.nom.toUpperCase()}}</td>
					<td>{{candidat.heure}}</td>
					<td><button ng-click="getCandidat(candidat.id)">Evaluer</button></td>
				</tr>
			</table>

Attention, en l'occurence, la variable candidat.dateRdv présente dans le modèle doit avoir le format "compris" par BootstrapUi Angular date picker, c'est à dire que
si ton format de date est par exemple dd/mm/yyyy, alors tout doit être identique, mais si BootstrapUi Angular date picker te fournit une variable au format de date du style yyyy-mm-dd,
alors faut pas se planter, le top c'est qu'on peut le paramétrer pour qu'il soit en Français et qu'il fournisse une variable en Français.

Et voici une petite appli pas terrible que j'ai faite qui l'utilise :

http://nicolash.org/angular/app7.html#/

Clique sur "selectionner un candidat" puis choisit le 21 Avril 2015 pour voir le filtrage du modèle par date en action en temps réel (pas d'ajax).

Ah, j'oubliais, voici mon modèle de données avec les dates :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
 
 
{"id":"1","photo":"man.jpg",	"prenom":"Theodore", 	"nom":"Juvet","heure":"17:30",	"dateRdv":"21-04-2015", 		"evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"1","resultat":"","noteMoyenne":""},
{"id":"2","photo":"man.jpg",	"prenom":"Axel", 		"nom":"Chavert","heure":"08:30",	"dateRdv":"21-04-2015", 	"evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test2","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"3","photo":"candidat.jpg",	"prenom":"Mohammed", 	"nom":"Fata","heure":"10:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test3","rdvEffectue":"0","emploi":"","idmetier":"4","resultat":"","noteMoyenne":""},
{"id":"4","photo":"candidat.jpg",	"prenom":"Chavez", 		"nom":"Williams","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"10","cv":"5","orthographe":"5","etudes":"16","experience":"5","disponibilite":"2","communication":"12","maths":"4","lettres":"4","creativite":"10","sportivite":"5"},"notes":"Test4","rdvEffectue":"1","emploi":"Plombier","idmetier":"1","resultat":"78","noteMoyenne":"7.09"},
{"id":"5","photo":"candidat.jpg",	"prenom":"Phillipe", 	"nom":"Andrieux","heure":"17:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test8","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"6","photo":"candidat.jpg",	"prenom":"Axel", 		"nom":"Dubourg","heure":"08:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test7","rdvEffectue":"0","emploi":"","idmetier":"1","resultat":"","noteMoyenne":""},
{"id":"7","photo":"candidat.jpg",	"prenom":"Trisha", 		"nom":"Ravel","heure":"10:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test40","rdvEffectue":"0","emploi":"","idmetier":"3","resultat":"","noteMoyenne":""},
{"id":"8","photo":"candidat.jpg",	"prenom":"Robert", 		"nom":"Zarinas","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"9","photo":"candidat.jpg",	"prenom":"Abdel", 		"nom":"Silias","heure":"17:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"2","cv":"18","orthographe":"14","etudes":"9","experience":"11","disponibilite":"12","communication":"13","maths":"3","lettres":"12","creativite":"5","sportivite":"11"},"notes":"Test","rdvEffectue":"1","emploi":"Plaquiste","idmetier":"2","resultat":"110","noteMoyenne":"10.00"},
{"id":"10","photo":"candidat.jpg",	"prenom":"Patrick", 	"nom":"Gonzales","heure":"08:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"0","resultat":"","noteMoyenne":""},
{"id":"11","photo":"candidat.jpg",	"prenom":"Thierry",		"nom":"Roc","heure":"10:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"4","resultat":"","noteMoyenne":""},
{"id":"12","photo":"candidat.jpg",	"prenom":"Ursula", 		"nom":"Hembert","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"1","resultat":"","noteMoyenne":""},
{"id":"13","photo":"personne.gif",	"prenom":"William", 	"nom":"Cindrocik","heure":"15:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"14","photo":"candidat.jpg",	"prenom":"Hammed", 		"nom":"Chaverto","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"18","cv":"5","orthographe":"15","etudes":"7","experience":"2","disponibilite":"2","communication":"3","maths":"4","lettres":"4","creativite":"5","sportivite":"3"},"notes":"Test","rdvEffectue":"1","emploi":"Commercial","idmetier":"5","resultat":"68","noteMoyenne":"6.18"},
{"id":"15","photo":"personne.gif",	"prenom":"Grondin", 	"nom":"Kirckpatrick","heure":"15:30","dateRdv":"21-04-2015", "evaluation" : {"motivation":"5","cv":"15","orthographe":"5","etudes":"3","experience":"12","disponibilite":"19","communication":"13","maths":"5","lettres":"15","creativite":"16","sportivite":"10"},"notes":"Test","rdvEffectue":"1","emploi":"Commercial","idmetier":"5","resultat":"118","noteMoyenne":"10.73"}
 
 
 
]

Comment implanter un calendrier AngularJS

AngularJS

Vue hybride

Discussions similaires

Partager

Partager