davy_yg's avatar
Level 27

datepicker is not a function

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

index.blade.php

		<head>
		<title>Landing Page</title>
		<link rel="shortcut icon" type="image/jpg" href="{{ asset('extra_images/FBlinds-fav.png')}}"/>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

		 <!--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> -->

		<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

	    <!-- Carousel -->
		<link rel="stylesheet" href="{{ asset('css/otherstyles.css') }}">
		<link rel="stylesheet" href="{{ asset('css/pawcarousel.css') }}">
		<!--You can use jQuery 2.x as well if you don't want to support older browsers -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="{{ asset('js/pawcarousel.jquery.min.js') }}"></script>

	    <!-- date picker -->
		<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
		<link rel="stylesheet" href="/resources/demos/style.css">
		<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
		<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
		<!-- end date picker -->

		<script>
  		$(function(){
    			$('.paw-carousel').pawCarousel();
  		});

  		$(function(){
    			$( "#datepicker" ).datepicker();
  		});
	</script>

	</head>
		....
		<label for="fname" style="padding-bottom: 10px; padding-top: 10px;">Jadwal yang diinginkan:</label><br>
        <input type="text" class="form-control" id="datepicker" name="produk">

ref: https://jqueryui.com/datepicker/

https://stackoverflow.com/questions/38118371/datepicker-is-not-a-function-jquery-bootstrap/38118537

Any idea why?

0 likes
5 replies
Tray2's avatar

The code kinda works like it should, so you have an error in your other javascript

So read the errors in the console.

Tray2's avatar

Comment out all javascript except the things you need for the datapicker then try again. If it works add a little more javascript and keep doing that till it breaks, then you know what the issue is.

furqanDev's avatar

Remove the duplicated script files and use Scripts at the end of the page after the input tag. Check if it helps.

Snapey's avatar
Snapey
Best Answer
Level 122

you load jquery twice...

Please or to participate in this conversation.