title: Laravel 7 jQuery UI datepicker: Uncaught TypeError: $(…).datepicker is not a function
body: <p>I'd like to add a <strong>jQuery UI datepicker</strong> field to a form in a laravel 7 app, but I always get the following error message:</p>
  <blockquote>
  <p>Uncaught TypeError: $(...).datepicker is not a function.</p>
  </blockquote>
  <p>I tried to use the source code example from <a href="https://jqueryui.com/datepicker/" rel="nofollow noreferrer">here</a>.</p>
  <p>I read at least a dozen different posts on how to fix this, tried all of them without luck in my case.</p>
  <p>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 datepicker 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!</p>
  <p>App layout file header:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;!-- CSRF Token --&gt;
      &lt;meta name=&quot;csrf-token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script src=&quot;{{ asset('js/app.js') }}&quot; defer&gt;&lt;/script&gt;
      
      &lt;!-- Fonts --&gt;
      &lt;link rel=&quot;dns-prefetch&quot; href=&quot;//fonts.gstatic.com&quot;&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Nunito&quot; rel=&quot;stylesheet&quot;&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href=&quot;{{ asset('css/app.css') }}&quot; rel=&quot;stylesheet&quot;&gt;
      
      &lt;link rel=&quot;stylesheet&quot; href=&quot;//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css&quot;&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  <p>View file:</p>
  <pre><code>@extends('layouts.app')
  
  @section('content')
  
  &lt;form action=&quot;&quot; method=&quot;post&quot; action=&quot;/tour/{id}&quot;&gt;
      &lt;!-- CROSS Site Request Forgery Protection --&gt;
      @csrf
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Date&lt;/label&gt;&lt;br&gt;
          &lt;input id=&quot;datepicker&quot; type=&quot;text&quot; /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      $( function() {
          $( &quot;#datepicker&quot; ).datepicker();
      });
  &lt;/script&gt; 
  @endsection
  </code></pre>