Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

$(...).datepicker is not a function - JQuery - Bootstrap

I'm trying to include the datepicker for Bootstrap but am getting the following error:

Uncaught TypeError: $(...).datepicker is not a function

I don't see why it's there. I've looked at other cases of this error, but none match mine.

HTML:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/main.js"></script>

<div class="col-md-6">
    <div class="form-group">
         <label for="geboortedatum">Geboortedatum:</label>
         <div class="input-group datepicker" data-provide="datepicker">
               <input type="text" name="geboortedatum" id="geboortedatum" class="form-control">
               <div class="input-group-addon">
                   <span class="glyphicon glyphicon-th"></span>
               </div>
         </div>
    </div>
</div>

JS:

$(document).ready(function() {

    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy'
    });
});

UPDATE after adding JQuery UI

It now looks like the following:

update after adding JQuery UI

like image 811
Chris Avatar asked Jun 30 '16 08:06

Chris


People also ask

How to solve$(. datepicker is not a function?

To solve the "$(...). datepicker is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown. Copied!

Does bootstrap 5 have a Datepicker?

Bootstrap 5 Datepicker. Date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.

How can add date picker in jQuery?

$(function() { $("input#date_due"). datepicker(); }); The selector you want is all elements with the tag name "input" and the id attribute set to "date_due".

What is Datepicker in JavaScript?

The JavaScript DatePicker (Calendar Picker) is a lightweight and mobile-friendly control that allows end users to enter or select a date value. It has month, year, and decade view options to quickly navigate to the desired date.


2 Answers

Need to include jquery-ui too:

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
like image 185
Fseee Avatar answered Sep 25 '22 15:09

Fseee


Not the right function name I think

$(document).ready(function() {

    $('.datepicker').datetimepicker({
        format: 'dd/mm/yyyy'
    });
});
like image 39
François Richard Avatar answered Sep 24 '22 15:09

François Richard