Faire fonctionner code source de base Bootstrap 3 DatePicker

Résolu/Fermé

noob-28 Messages postés 7 Date d'inscription mercredi 30 novembre 2016 Statut Membre Dernière intervention 2 décembre 2016 - Modifié par noob-28 le 30/11/2016 à 21:19
noob-28 Messages postés 7 Date d'inscription mercredi 30 novembre 2016 Statut Membre Dernière intervention 2 décembre 2016 - 1 déc. 2016 à 18:58

Bonsoir,

Je suis débutant en programmation. Je n'arrive pas à faire fonctionner le code source de base de Bootstrap pour afficher un calendrier...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>calendrier</title>
    <link rel="stylesheet" href="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css%22 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">]
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="[https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js%22 https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>]
</head>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

<body>
</body>
</html>

J'ai cette erreur :
jQuery.Deferred exception: $(...).datetimepicker is not a function @http://localhost/calendrier/:30:17
g/</j@https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
undefined
TypeError: $(...).datetimepicker is not a function

Si quelqu'un peut m'aider...Merci

A voir également:

Datepicker bootstrap 3
Ai suite 3 - Télécharger - Optimisation
Picasa 3 - Télécharger - Albums photo
Photorecit 3 - Télécharger - Visionnage & Diaporama
Samsung kies galaxy tab 3 ✓ - Forum Mobile
Captvty 3 - Télécharger - Télévision

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38471 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2025 4 742
1 déc. 2016 à 10:44

Bonjour,

Tu as inclus le js du datepicker ? je ne le vois pas dans tes imports js/css

Regarde ici : https://eonasdan.github.io/bootstrap-datetimepicker/Installing/

noob-28 Messages postés 7 Date d'inscription mercredi 30 novembre 2016 Statut Membre Dernière intervention 2 décembre 2016
1 déc. 2016 à 11:40

Je ne comprends rien du tout... tu parles de cette ligne :

<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

Si oui quand je l'inclus ça ne change rien. Est-ce que tu pourrais m'envoyer le code de base en entier, fonctionnel ? normalement ça devrait prendre 1 minute mais je n'y arrive pas, je ne comprends rien.

jordane45 Messages postés 38471 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2025 4 742 > noob-28 Messages postés 7 Date d'inscription mercredi 30 novembre 2016 Statut Membre Dernière intervention 2 décembre 2016
1 déc. 2016 à 12:01

Tu dois télécharger le JS dans le répertoire de ton site puis l'inclure ensuite.
Ne fais pas un lien directement depuis le /bower

noob-28 Messages postés 7 Date d'inscription mercredi 30 novembre 2016 Statut Membre Dernière intervention 2 décembre 2016 > jordane45 Messages postés 38471 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2025
Modifié par noob-28 le 1/12/2016 à 12:44

donc ce fichier là :

 <script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>

?

et j'inclus le knockout ? je suppose que c'est ça car je n'ai pas trouver de fichier JS à télécharger. Je ne comprends rien du tout, sur le site https://eonasdan.github.io/bootstrap-datetimepicker/ il marque juste minimum setup là j'ai l'impression qu'il faut faire 50 000 trucs pour afficher le calendrier.

Oui ce fichier la.
Tu peux le télécharger ici :
https://github.com/Eonasdan/tempus-dominus

noob-28 Messages postés 7 Date d'inscription mercredi 30 novembre 2016 Statut Membre Dernière intervention 2 décembre 2016
Modifié par noob-28 le 1/12/2016 à 14:04

J'ai télécharger le fichier.js Voici mon fichier index.php :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>calendrier</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>
    

</head>

<div class="container">
    <div class="row">
        <div class='col-sm-4'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').data("datetimepicker")
            });
        </script>
    </div>
</div>

<body>
</body>
</html>

et mon fichier datetimepicker dans le même dossier, ça ne fonctionne toujours pas. Le fichier que j'ai télécharger n'a pas l'extension (.min.js) juste .js mais tu m'as dis que c'était le bon fichier dans mon script ? mes fichiers sont dans mon répertoire (wamp/www/calendrier).

Discussions similaires

Voxbone ? qui est-ce ?

Que signifie cet emoji :3

Signification de " :3 "

signification "<3" dans un sms

3 bip long 2 bip courts