エラー Uncaught TypeError: $(...).datepicker is not a functionの解決方法

Question

エラーの解決方法がわかりません。
Uncaught TypeError: $(...).datepicker is not a function
公式サイト

単体で下記のコードを実行すると成功し、フォームにカレンダーが表示されるのですが、

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <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>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
 </script>
 <p>Date: <input type="text" id="datepicker"></p>

djangoのformなどと一緒に表示させるとタイトルのエラーが出てしまい、カレンダーが表示されません。

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <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>
<form action="" method="POST" enctype="multipart/form-data" class="h-adr">
    {% csrf_token %}
    {{ form.media }}
    <h2>店舗情報</h2>
    <div class="row">
        <div class="item-zip_code col-sm-5">
            <div class="item-title">
                {{ form.title | as_crispy_field }}
                {{ form.title.error }}
            </div>
            <div class="item-category">
                {{ form.category | as_crispy_field }}
                {{ form.category.error }}
            </div>
        </div>
    </div>
</form>
<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
 </script>
 <p>Date: <input type="text" id="datepicker"></p>

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

何かアドバイスをいただきたいです。