Search code examples
javascriptjquerylaraveltwitter-bootstrapbootstrap-datepicker

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

I'd like to add a bootstrap datepicker field to a form in a laravel 7 app, but I always get the following error message: Uncaught TypeError: $(...).datepicker is not a function.

I read at least a dozen different posts on how to fix this, tried all of them without luck in my case.

My feeling is that my laravel app (maybe in app.js?) already loads one of the scripts or maybe a different version of a the same script (maybe jQuery?) used also by the datetimepicker and this causes the issue. Unfortunately being new to Laravel, I'm not sure how to solve this. Please see below some code samples and let me know, if you have any suggestions. Many thanks!

App layout file header:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">
    
    
</head>

View file:

@extends('layouts.app')



@section('content')

<form action="" method="post" action="/tour/{id}">

<!-- CROSS Site Request Forgery Protection -->
@csrf


<div class="form-group">
    <label>Date</label><br>
    <input id="datepicker" type="text" />
</div>


</form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
$( "#datepicker" ).datepicker({
format: "mm/dd/yy",
});
</script>
Solution

  • You are initiating datepicker in your code, but in the header you are loading a completely different plugin datetimepicker