2 pièce(s) jointe(s)
Utiliser un datetimepicker
Bonjour
Je rencontre un problème, j'aimerais utiliser un datetimepicker avec bootstrap et jquery mais impossible de le faire fonctionner.
Je rencontre l'erreur suivante : TypeError: $(...).datetimepicker is not a function.
En fait j'aimerais juste pouvoir cliquer sur l'input afficher le calendrier sélectionner une date et voilà.
Voici ce que j'obtient, j'ai beau cliquer sur le calendrier le calendrier n’apparaît pas :
Pièce jointe 359158
Voici les erreurs que j'obtient :
Pièce jointe 359162
Et ça c'est mon code :
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 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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plan'it!</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="icon" href="./images/favicon.ico" />
</head>
<body>
<!-- Ajout de la bibliothèque jQuery -->
<script type="text/javascript" src="./javascript/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="./javascript/jquery-ui.min.js"></script>
<header>
<a href="."><img src="./images/logo.png" alt="Plan'it" id="logo"/></a>
<form id="connex_inscr" method="post" action="index.php">
<button class="button" name='action' type='submit' value='SIGNOUT'><span>Déconnexion </span></button>
</form>
</header>
<script type="text/javascript" src="./javascript/script.js"></script>
<script type="text/javascript" src="./javascript/XHR.js"></script>
<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>
<label for="id_select" class="rouge">Agenda courant</label>
<select name="select" id="id_select" required autofocus onchange="ecrire(this.options[this.selectedIndex].innerHTML, 'id_titre'); request(this);">
<option value=1>Mon agenda</option><option value=2>Mon autre agenda</option><option value=4>test</option><option value=7>agenda</option></select>
<span id="loader" style="display: none;"><img src="./images/loader.gif" alt="loading" style="width: 30px; margin-bottom: -10px" /></span>
<h1 id="id_titre"></h1>
<form method="POST" action=".">
<button type="submit" value="newAgenda" class="button" name="action" ><span>Nouvel agenda </span></button>
</form>
<form method="POST" action=".">
<input type="hidden" name="agenda" id="id_agenda" value="">
<button type="submit" value="newEvent" class="button" name="action" ><span>Ajouter </span></button>
</form>
<div id="events">aucun event</div>
<script>
var div = document.getElementById('id_select');
ecrire(div.options[div.selectedIndex].innerHTML, 'id_titre');
request(div);
</script>
<!--<script>
/* initialize modals */
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
});
</script>-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ajouter</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 for="close_button" class="modal-title col-sm-4" id="exampleModalLabel">Ajouter un évenement</h5>
<button type="button" id="close_button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="required" id="js_error"></p>
<form method="POST" action="." id="event" onsubmit="return verifAddEventForm(this)">
<!-- Type de l'evenement -->
<div class="form-group row">
<label for="id_type" class="col-sm-4 col-form-label">Nom de l'evenement<sup class='required'>*</sup></label>
<div class="col-sm-8">
<select name="type" form="event" id="id_type" class="form-control" required autofocus>
<option value="" selected disabled hidden></option>
<option value=Reunion>Reunion</option><option value=Repas>Repas</option><option value=Anniversaire>Anniversaire</option><option value=Cours>Cours</option><option value=Examen>Examen</option> </select>
</div>
</div>
<!-- Description -->
<br />
<label for="id_desc">Description de l'evenement </label>
<textarea class="form-control" name="desc" id="id_desc" placeholder="Description" onblur="verifText(this)"></textarea>
<!-- Champs de dates -->
<br />
<div class="container">
<div class='col-md-2'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-2'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
<!-- Lieu -->
<br />
<label for="id_lieu">Lieu </label>
<input type="text" name="lieu" id="id_lieu" onblur="verifText(this)"/>
<!-- Options -->
<br />
<label for="id_prio">Prioritaire </label>
<input type="checkbox" name="prio" id="id_prio" value="0" />
<label for="id_public">Public </label>
<input type="checkbox" name="public" id="id_public" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<!-- Envoi -->
<button type="submit" class="btn btn-success" name="action" value="AjouterEvent">Ajouter</button>
</div>
</form> <!-- fin du formulaire d'ajout d'event -->
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<h1>FOOTER</h1>
</footer>
<p class="copyrights">© Copyrights - La RATP</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./javascript/script.js"></script>
</body>
</html> |
Si vous avez besoin de plus d'infos je suis à votre disposition.
Merci d'avance
Raphaël.