Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cvkmrao's avatar

Laravel, on blade used date time picker showing error Uncaught TypeError: $(...).datetimepicker is not a function

In Laravel on blade used date time picker showing error, code is given below need help

task:17 Uncaught TypeError: $(...).datetimepicker is not a function at HTMLDocument. (task:17) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.K (jquery.min.js:2)

-----Code------

@extends('layouts.app')

@section('content')

Schedule an Appointment First Name Last Name Email Appointment Time

@endsection

$(function () { $('#datetimepicker1').datetimepicker(); });
0 likes
10 replies
deansatch's avatar

Use backticks to insert your code.

Where are you including JQuery and the date time picker scripts?

cvkmrao's avatar

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>



@extends('layouts.app')


@section('content')


<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">Schedule an Appointment</div>
      <div class="panel-body">
         <div class="row">
            <div class="col-md-6">
               <div class="form-group">
                  <label class="control-label">First Name</label>
                  <input type="text" class="form-control" name="fname" id="fname">
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label class="control-label">Last Name</label>
                  <input type="text" class="form-control" name="lname" id="lname">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-6">
               <div class="form-group">
                  <label class="control-label">Email</label>
                  <input type="text" class="form-control" name="email" id="email">
               </div>
            </div>
            <div class='col-md-6'>
               <div class="form-group">
                  <label class="control-label">Appointment Time</label>
                  <div class='input-group date' id='datetimepicker1'>
                     <input type='text' class="form-control" />
                     <span class="input-group-addon">
                     <span class="glyphicon glyphicon-calendar"></span>
                     </span>
                  </div>
               </div>
            </div>
        </div>
        <input type="submit" class="btn btn-primary" value="Submit">
      </div>
   </div>
</div>



@endsection


<script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
 });
</script>  `````
deansatch's avatar

in your layouts.app file add this before the closing body tag

@yield('scripts')

Then in your file (above) add this:


@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
 });
</script> 
@endsection

1 like
jeevamugunthan's avatar

use this script

src="youtpath/datepicker.js"

then in datepicker.js file

$(function() { 'use strict';
	if($('#datetimepicker1').length) {
		var date = new Date();
		var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#due_from').datepicker({
  format: "mm/dd/yyyy",
  todayHighlight: true,
  autoclose: true
});
$('#datetimepicker1').datepicker('setDate', today);

} });

1 like
cvkmrao's avatar

Thank you @deansatch , you have given the right idea still shown the same error , i checked the generated html after testing , i commented the line in app.blade.php.

now date time is showing on click. Thank you

cvkmrao's avatar

i need help how to make my javascript working in add.blade.php (mypage) along with <s c r i p t src="{{ asset('js/app.js') }}" defer>< / s c r i p t > in app.blade.php

cvkmrao's avatar

removed the defer attribute from the script tag and now its working.

cvkmrao's avatar

removed the defer attribute from the script tag and now its working.problem solved thank you @deansatch

Please or to participate in this conversation.