![](/img/trans.png)
[英]Laravel 7 bootstrap datepicker: Uncaught TypeError: $(…).datepicker is not a function
[英]Laravel 7 jQuery UI datepicker: Uncaught TypeError: $(…).datepicker is not a function
我想在 laravel 7 應用程序中的表單中添加一個jQuery UI datepicker字段,但我總是收到以下錯誤消息:
未捕獲的類型錯誤:$(...).datepicker 不是函數。
我嘗試使用此處的源代碼示例。
我至少閱讀了十幾篇關於如何解決這個問題的不同帖子,在我的情況下嘗試了所有這些帖子,但都沒有運氣。
我的感覺是我的 Laravel 應用程序(可能在 app.js 中?)已經加載了一個腳本,或者可能是 datepicker 也使用的同一腳本的不同版本(可能是 jQuery?),這會導致問題。 不幸的是,我是 Laravel 的新手,我不知道如何解決這個問題。 請參閱下面的一些代碼示例,如果您有任何建議,請告訴我。 非常感謝!
應用布局文件頭:
<!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 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>
</head>
查看文件:
@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>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
@endsection
那么在這里你實際上兩次調用 jquery。 一個在 app js 文件中,另一個來自 cdn。 你不需要調用cdn。 並且當您在 app js 和另一個版本的 jquery 中使用defer
屬性時,兩者都存在沖突,因此 datepicker 不是一個函數。 您可以簡單地刪除defer
屬性和額外的 cdn 調用。
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.