J'ai cette erreur: $ (...). Datepicker n'est pas une fonction

J'essaie d'utiliser une datepicker, mais cela ne fonctionne pas.

J'ai cette erreur: $(...).datepicker n'est pas une fonction

J'utilise de nombreux cadres et (Adminlte librairie, bootstrap, chartjs, datatable). Et je pense qu'il y a un conflit entre eux.

$(document).ready(function() { 
 
    $('#datepicker').datepicker(); 
 
    $('#datepicker').on("changeDate", function() { 
 
     $('#my_hidden_input').val(
 
      $('#datepicker').datepicker('getFormattedDate') 
 
     ); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="fr"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>AdminLTE 2 | Dashboard</title> 
 
    <!-- Tell the browser to be responsive to screen width --> 
 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
 
    <!-- Bootstrap 3.3.6 --> 
 
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
 
    <!-- Font Awesome --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
    <!-- Ionicons --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> 
 

 
    <!-- Theme style --> 
 
    <link rel="stylesheet" href="./css/AdminLTE.min.css"> 
 
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
 
     folder instead of downloading all of them to reduce the load. --> 
 
    <link rel="stylesheet" href="./css/skin-black-light.css"> 
 
    <!-- CSS Table --> 
 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 

 

 
    <!-- My Style --> 
 
    <link rel="stylesheet" href="./css/style_general.css"> 
 
    <link rel="stylesheet" href="./css/style.css"> 
 

 
    <link rel="stylesheet/less" type="text/css" href="./less/dropdown.less" /> 
 
    <link rel="stylesheet/less" type="text/css" href="./less/sprites.less" /> 
 

 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body class="hold-transition skin-blue sidebar-mini fixed"> 
 
    
 
           <div class="form-group"> 
 
           <label>Date</label> 
 
           <div class="input-group date margin-bottom-10" id="datetimepicker1"> 
 
            <input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY"> 
 
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
           </div> 
 
          </div> 
 
    
 
    <!-- jQuery 2.2.3 --> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 
    <!-- Bootstrap 3.3.6 --> 
 
    <script src="./js/bootstrap.min.js"></script> 
 
    <!-- AdminLTE App --> 
 
    <script src="./js/app.min.js"></script> 
 
    <!-- ChartJS 1.0.1 --> 
 
    <script src="./js/Chart.min.js"></script> 
 
    <!-- AdminLTE for demo purposes --> 
 
    <script src="./js/demo.js"></script> 
 
    <!-- SlimScroll 1.3.0 --> 
 
    <script src="./js/jquery.slimscroll.min.js"></script> 
 
    <!-- JS table --> 
 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
    <script src="./js/test_table.js"></script> 
 
    <script src="./js/js.js"></script> 
 
</body> 
 

 
</html>

Source

2016-09-26 DenisMasot

Avez-vous inclus 'jquery'? –

try jQuery (...). Datepicker –

Ne pas lier à jsbin sans inclure du code dans la question ... – evolutionxbox

Je pense que datepicker est disponible dans l'interface utilisateur JQuery, mais vous ne l'avez pas inclus ces fichiers de bibliothèque. quand j'inclure les fichiers ci-dessous il n'y a pas une telle erreur $ (...). datepicker

s'il vous plaît inclure ces fichiers et vérifier
[link] https://code.jquery.com/ui/1.12.1/jquery-ui.js
[link] https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

Source

2016-09-26 10:57:42

J'ajoute un lien mais ça ne change rien – DenisMasot

Veuillez consulter ce lien [link] https: // jqueryui. com/datepicker/ –

@Naveen Je pensais que je poursuivais un fantôme pour l'heure passée aujourd'hui où je recevais la même erreur que l'OP ici. J'ai Google/testé pendant tout ce temps jusqu'à ce que je suis tombé sur ce Q & A (votre réponse plus précisément était la solution pour moi) où j'ai dû utiliser une version plus récente de jquery ui.Toutes les autres questions/réponses (similaires) ne m'ont pas aidé, mais les vôtres l'ont fait; Je pensais que je partagerais cela avec vous, * acclamations * –

Assurez-vous que vous incluez que datapicker.js bibliothèque sur la page que vous utilisez sur. Assurez-vous que le lien/fichier local existe. Il peut être chargé à partir d'un fichier différent si vous utilisez bootstrap/framework.

C'est la raison la plus courante.

Source

2016-09-26 10:24:31 Marcin

Un mauvais ordre est un problème courant, aussi inclut jQuery.js plus d'une fois. Nombreuses raisons pour lesquelles erreur peut être levée – charlietfl

J'ajoute un lien mais ça ne change rien – DenisMasot

-1

inclue JqueryUI

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Source

2016-09-26 10:25:34

Je suis passé par tous vos fichiers js.

A noté que vous utilisez AdminLTe pour vos js et css. Dans ce cas, vérifiez à nouveau l'exemple dans Forms > Advanced Elements dans le panneau de gauche.

Je pense que vous avez manqué le bootstrap datepicker: Essayez ce fichier js AdminLTe Exemple: <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">

Source

2016-09-26 10:31:47 Jacky

Je n'utilise pas bootstrap datepicker – DenisMasot

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<script> 
    var j = jQuery.noConflict(); 
    j(function() { 
     j("#datepicker").datepicker(); 
    }); 
</script>

Veuillez l'essayer de cette façon. Cela fonctionne bien. Le même objet est défini et utilisé par jquery afin que son conflit tente de tromper son travail.

Source

2017-03-20 06:45:17 Sarjil

Veuillez tabuler votre code correctement et ajouter quelques explications avec votre extrait pour plus de clarté. – mickmackusa

Merci :) Je vais – Sarjil

J'ai cette erreur: $ (...). Datepicker n'est pas une fonction

Répondre

Questions connexes