Faire fonctionner code source de base Bootstrap 3 DatePicker [Résolu/Fermé]

Signaler
Messages postés
7
Date d'inscription
mercredi 30 novembre 2016
Statut
Membre
Dernière intervention
2 décembre 2016
-
Messages postés
7
Date d'inscription
mercredi 30 novembre 2016
Statut
Membre
Dernière intervention
2 décembre 2016
-
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

1 réponse

Messages postés
32986
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juin 2021
3 563
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/

Messages postés
7
Date d'inscription
mercredi 30 novembre 2016
Statut
Membre
Dernière intervention
2 décembre 2016

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).
Messages postés
32986
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 juin 2021
3 563 >
Messages postés
7
Date d'inscription
mercredi 30 novembre 2016
Statut
Membre
Dernière intervention
2 décembre 2016

< block>
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
</block>
ben... non... tu adaptes......
Messages postés
7
Date d'inscription
mercredi 30 novembre 2016
Statut
Membre
Dernière intervention
2 décembre 2016

Ok merci, donc j'ai retirer le .min.js. Je fais comment après pour le charger depuis la racine car ça n'a pas l'air de fonctionner ?
 <script type="text/javascript" src="wamp/www/calendrier/bootstrap-datetimepicker.js"></script>


J'ai essayer de retirer wamp, retirer www...si je mets juste bootstrap-datetimepicker.js ça ne fonctionne toujours pas, pourtant il est dans le même dossier que mon index.html.
Messages postés
2385
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
18 juin 2021
446
Si le fichier js est dans le même dossier que ta page index.html, tu peux effectivement saisir uniquement le nom du fichier dans l'attribut src.

Néanmoins d'après la procédure d'installation manuelle (https://eonasdan.github.io/bootstrap-datetimepicker/Installing/#manual), il te manque le fichier moment.js ainsi que bootstrap.js
Messages postés
7
Date d'inscription
mercredi 30 novembre 2016
Statut
Membre
Dernière intervention
2 décembre 2016

Merci pour votre aide mais j'ai laisser tomber et trouver une autre alternative.