Ajouter un calendrier à coté d'un formulaire

**ramzi87** · 28/08/2015, 16h15

Bonsoir,
Je veux ajouter un calendrier à coté d'un formulaire lorsque je clique sur une date et je remplie mon formulaire et je valide la date sera dans la base (tableau) sachant que je n'ai pas un champ date dans mon formulaire, en plus les journées remplies sont en rouge et les autres en gris, à partir de demain en bleu sauf dimanche qui est en gris.

Nom : Calendar.jpg
Affichages : 1459
Taille : 20,2 Ko

Voilà mon formulaire avec des div que je n'ai pas pu insérer un exemple de calendrier à droite du form et en dehors

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
       <div class="container-fluid" id="result">
			<h1 class="col-xs-12 col-md-4 col-md-offset-4 center">Prestation</h1>
			<div class="col-xs-12 col-md-12">
				 <div class="container" id="formulaire">
				 <form action="prestation.php" method="post" id="userForm" class="form-horizontal">
 
				<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
 
<select name="client" class="form-control">
			<option value="" disabled selected>--- Choisir le client ---</option>
			<?php
                        
                        foreach($conn as $row)
                        {
                                echo "<option>".$row['clientName']."</option>";
                        }
 ?>
 </select>
 </div>
 </div>
 	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
<select name="name" class="form-control">
			<option value="" disabled selected>--- Choisir le projet ---</option>
 
			<option value="START" >START</option>
			<option value="END" >END</option>
			</p>
			<?php
                        
                        foreach($conn1 as $row)
                        {
                                echo "<option>".$row['name']."</option>";
                        }
 ?>
 </select>
 </div>
 </div>
 	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
 <select name="tache" class="form-control">
 <option value="" disabled selected>--- Choisir une tâche ---</option>
							<option>Tâche matin</option>
							<option>Tâche après-midi</option>
							<option>Tâche hors-période</option>
 
</select>
 
			</div>
        </div>
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="debut" value="" placeholder="Début" id="debut">
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('debut').value = getDt()">
 
 
		</div>
        </div>
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="fin" value="" placeholder="Fin" id="fin">
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('fin').value = getDt()">
 
 
		</div>
        </div>
 
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
<select name="selection" class="form-control">
	<option value="" disabled selected>--- Choisir une action ---</option>
		<option> Analyse</option>
		<option> Recherche</option>
		<option> Développement</option>
		<option> Débogage</option>
</select>
 
		</div>
 
</div>
 
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
					 <select name="note" class="form-control">
 <option value="" disabled selected>--- Choisir une note ---</option>
 <option>5%</option> <option>10%</option><option>20%</option><option>30%</option>
<option>40%</option><option>50%</option><option>60%</option><option>70%</option><option>80%</option><option>90%</option><option>100%</option>
 
 
</select>
</div>
 
</div>
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
				<center>	
					 <textarea rows="5" cols="50" name="rapport" placeholder="Rapport" ></textarea>
					 </center>
 
 
 
		</div>
		</div>
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
						<button type="submit" class="form-control btn btn-success pull-right" name="envoyer" id="envoyer">Enregistrer</button>
					</div>
				</div>
 
 </form>
 </div>
</div>
</div>

Merci d'avance

Invité · 28/08/2015, 19h19

Bonjour,
fais une recherche

avec : "Datepicker"

**ramzi87** · 29/08/2015, 13h22

J'ai passé beaucoup de temps à rechercher mais j'ai trouvé que datepicker pour input text mais moi je veux un calendrier dans la page toujours display

Invité · 29/08/2015, 16h08

Code :

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

1
2
3
4
5
6
7
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
<div id="calendar">
  <input type="hidden" id="calendardate" name="ladate" />
</div>

Code :

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

1
2
3
4
5
6
7
<script>
    $(function() {
        $("#calendar").datepicker({
        altField: "#calendardate"
        });
    });
</script>

Tu appliques la fonction datepicker sur le div : le calendrier reste affiché. (voir ici)
Il faut ajouter un input caché, puisque tu veux pouvoir enregistrer ensuite la date en BdD.

N.B. Il est possible de formater la date : datepicker options