Faire fonctionner code source de base Bootstrap 3 DatePicker

Résolu

noob-28 Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
noob-28 Messages postés 7 Date d'inscription Statut Membre Dernière intervention - 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
Imagen 3 - Accueil - Applications & Logiciels
Zelda 3 - Accueil - Guide jeu vidéo

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > noob-28 Messages postés 7 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > noob-28 Messages postés 7 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

Ca veut dire quoi :3

Signification de :3

signification "<3" dans un sms

3 a l'envers

Mise à jour logicielle samsung galaxy tab 3 avec kies

Votre réponse

Discussions similaires