I have this error : $(…).datepicker is not a function

问题

I try to use a datepicker, but it doesn't work.

I have this error : $(...).datepicker is not a function

I use many frameworks and librairy (Adminlte, bootstrap, chartjs, datatable). And I think that there is a conflicts between they.

$(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>

回答1:

I think datepicker is available in JQuery UI but you didn't include those library files. when I include the below files there is no such error $(...).datepicker

please include these file and check
[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

回答2:

Make sure that you include that datapicker.js library on the page that you use it on. Make sure that the link / local file exists. It may be a loaded from a different file if you are using bootstrap / framework.

This is the most common reason.

回答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>

Please try it this way. It is working fine. Same object is defined and used by jquery so its conflict try above trick its work fine..

回答4:

You can follow like this. This works for me.

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

The JS coding for the Date Picker I use.

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

The HTML Coding:

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

回答5:

I have gone through all your js files.

Noted that you are using AdminLTe for your js and css. In that case, check again the the example in Forms > Advanced Elements in left panel.

I think you missed out the bootstrap datepicker: Try searching for this js file in AdminLTe Example: <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">

回答6:

If datepicker does not work due to conflict jquery, then try this way. It will work.

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

回答7:

Inclue JqueryUI

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

来源：https://stackoverflow.com/questions/39700293/i-have-this-error-datepicker-is-not-a-function

标签

javascript

jquery

datepicker

conflict