Ich habe diesen Fehler : $(...).datepicker ist nicht eine Funktion

Ich versuche es mal mit einem datepicker, aber es funktioniert nicht.

Habe ich diese Fehlermeldung : $(...).datepicker ist nicht eine Funktion

Ich viele frameworks und librairy (Adminlte, bootstrap, chartjs, datatable). Und ich denke, dass es ein Konflikte zwischen Ihnen.

JS:

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

HTML:

<!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>

haben Sie gehören jquery ?
try jQuery(...).datepicker
Verweisen Sie nicht auf jsbin ohne eigentlichen code in der Frage...
Du bist nicht wie die datepicker-Bibliothek in Eure HTML -...
oder hast du das include jQuery zweimal?

InformationsquelleAutor DenisMasot | 2016-09-26

4

Ich denke datepicker ist in JQuery-UI haben, aber Sie nicht schließen diejenigen ein, die Bibliothek-Dateien. wenn ich den unter Dateien gibt es keine solchen Fehler $(...).datepicker

bitte berücksichtigen Sie diese Datei und überprüfen

[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
- Ich add link aber es tut sich auch nichts ändern
- Bitte überprüfen Sie diesen link [link] jqueryui.com/datepicker
- Ich dachte, ich jagte einen Geist der letzten Stunde heute, wo ich war, immer die gleichen Fehler, wie die OP hier. Ich habe Google hatte/getestet für alle, die Zeit, bis ich endlich kam auf diesem Q&A (Ihre Antwort genauer war die Lösung für mich), wo ich am Ende mit einer aktuellen version von jquery ui. Alle anderen (ähnlichen) Fragen/Antworten haben mir nicht helfen, aber dich habe; ich dachte, ich Teile das mit Euch, cheers
InformationsquelleAutor
4

Stellen Sie sicher, dass Sie beinhalten, dass datapicker.js Bibliothek auf der Seite, die Sie verwenden es auf. Stellen Sie sicher, dass der link /die lokale Datei existiert. Kann es sein, geladen aus einer anderen Datei wenn Sie mit bootstrap /framework.

Dies ist der häufigste Grund.
- Falsch, um ein gemeinsames problem, so ist darunter jQuery.js mehr als einmal. Zahlreiche Gründe, die die Fehler ausgelöst werden können
- Ich add link aber es tut sich auch nichts ändern
InformationsquelleAutor Marcin
3
```
<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>
```
Bitte versuchen Sie es auf diese Weise. Es ist in Ordnung. Gleiche Objekt definiert ist und verwendet jquery so den Konflikt versuchen, die oben genannten trick seine Arbeit in Ordnung..
- Bitte tab der code ordnungsgemäß und fügen Sie eine Erklärung mit Ihrem snippet für Klarheit.
- Vielen Dank 🙂 ich werde
- danke Mann, das war nur in meinem Fall sogar ohne js Referenzen..
InformationsquelleAutor Sarjil

Können Sie Folgen wie diese. Dies funktioniert für mich.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Den JS Code für die Datumsauswahl, die ich benutze.

<script>
        $(document).ready(function(){
            //alert ('Cliecked');
            var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            var options={
                format: 'dd/mm/yyyy',
                container: container,
                changeYear: true,
                changeMonth: true,
                todayHighlight: true,
                autoclose: true,
                yearRange: "1930:2100"
            };
            date_input.datepicker(options);
        });
    </script>

Den HTML-Codierung:

 <input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
 <label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>

InformationsquelleAutor Dulith De Costa

-1

Ich gegangen durch alle js-Dateien.

Darauf hingewiesen, dass Sie mit AdminLTe für Ihre js und css.
In diesem Fall, überprüfen Sie erneut das Beispiel in Forms > Advanced Elements im linken panel.

Ich glaube, Sie verpasste das bootstrap-datepicker: Versuchen Sie eine Suche für diese js-Datei in AdminLTe Beispiel: <link href="../../plugins/datepicker/datepicker3.css">
- Ich glaube nicht, verwenden bootstrap-datepicker
InformationsquelleAutor Jacky

-1

Wenn datepicker funktioniert nicht aufgrund von Konflikten jquery, dann versuchen Sie es auf diese Weise. Wird es funktionieren.

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {

  (function($){"use strict";
    var $window=$(window)
    var datepick=$('.date-pick')
    if($(datepick).length){$(datepick).datepicker({format:"dd/mm/yyyy"});}

  })(jQuery);

});
</script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <!-- datepicker js-->

InformationsquelleAutor Amranur Rahman

-2

Inclue JqueryUI

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

InformationsquelleAutor Aatif Bandey

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.