Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello! I have a problem with my projects. I have this line:
<script src="{{ asset('js/app.js') }}" defer></script>
If I don't comment this line, this script doesn't work:
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datetimepicker({
format: 'YYYY-MM-DD'
})
})
</script>
And my choose date doesn't show properly here: https://imgur.com/iJfkpX7. It show with time. I don't want to show with time.. And if I comment this line
<script src="{{ asset('js/app.js') }}" defer></script>
Choose date work perfectly without time, only date as in the script #datepicker. But it disables other functions for me (AddBtn.vue doesn't work properly after disable that line..) What is the problem?
My first guess would be that there's something in app.js that's breaking the execution of javascript. So when you don't comment it, the script doesn't really reach the script at the bottom.
Are there any errors in the console when you don't comment the app.js script?
@undeportedmexican https://imgur.com/zRgYcPg this is my console when I don't comment that line
@unk such a mess! You don't have an #app for the Vue application; you have so many inline Javascript dependencies I don't even know where to begin....
@tykus If I delete that line with script defer, my console is this: https://imgur.com/SLxHlQO
@unk Like @tykus said, super hard to keep track of all your dependencies. I would look for a way to remove JQuery entirely, you're already using Vue, so there's not a lot of sense on using JQuery any more. That's my take anyways.
Also like tykus said, I think the main problem is your template doesn't have an #app element, which Vue needs to know where to work.
@undeportedmexican And how to solve this? Because I use Bootstrapt and I think is from there. I don't know which one to leave and which to delete.
@unk pick off the easy fixes; like creating an element for the Vue app to attach to.
<div id="app">
</div>
@tykus I add to the file where is my problem. like there:
@extends('admin.layouts.master')
@section('content')
<div id="app"></div>
<div class="page-header">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="ik ik-command bg-blue"></i>
<div class="d-inline">
<h5>Doctors</h5>
<span>Appoinment Time</span>
</div>
</div>
</div>
<div class="col-lg-4">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="../index.html"><i class="ik ik-home"></i></a>
</li>
<li class="breadcrumb-item"><a href="#">Doctor</a></li>
<li class="breadcrumb-item active" aria-current="page">Appointment</li>
</ol>
</nav>
</div>
</div>
</div>
<div class="container">
@if(Session::has('message'))
<div class="alert bg-success alert-success text-white" role="alert" style="color: orange;">
{{Session::get('message')}}
</div>
@endif
@foreach($errors->all() as $error)
<div class="alert alert-danger">
{{$error}}
</div>
@endforeach
<form action="{{route('appointment.store')}}" method="post">@csrf
<div class="card">
<div class="card-header">
Choose date
</div>
<div class="card-body">
<input type="text" class="form-control datetimepicker-input" id="datepicker" data-toggle="datetimepicker" data-target="#datepicker" name="date">
</div>
</div>
And when I'm on this page, the error in the console with the app disappears, but the problem is not solved.
@unk so pick the next console error; and solve that.
Please or to participate in this conversation.