Why jquery date picker plugin is not working

Question

I'm making todo web application. If i run only date picker code it will run but when I combine with other html code it doesn't work

It only displays

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!--datepicker--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="{{ asset("css/todolist/datepicker.css") }}"> <input type="text" class="form-control" data-toggle="datepicker"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script href=" {{ asset('/js/todolist/datepicker.js') }}"}}></script> <script> $(function() { $('[data-toggle="datepicker"]').datepicker({ autoHide: true, zIndex: 2048, }); }); </script> 

When I click on input field field it should display date.

Answer 1

You're incorrectly importing the datepicker.js script. It should be src not href . It is also possible that you might have some errors in the syntax for your templating language, but I'm not sure what you're using so I can't be 100% confident about that. I think it needs to be like this,

<script src="{{asset('/js/todolist/datepicker.js')}}"></script>

But definitely it needs to be src and not href . If I reproduce your code and substitute the Github pages script from that repository, it works fine.

<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

Definitely don't use the Github pages URL though--it shouldn't be used as a CDN. I'm just using it as an example that proves that your problem is with the way you're importing that script.

Answer 2

Your code contains syntax error - use src to import datepicker plugin.

<script src="{{ asset('/js/todolist/datepicker.js') }}"}}></script>

Here you can find workable example of your plugin (I used CDN instead of GitHub),

 $(function() { $('[data-toggle="datepicker"]').datepicker({ autoHide: true, zIndex: 2048, }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fengyuanchen/datepicker@0.6.5/dist/datepicker.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/@fengyuanchen/datepicker@0.6.5/dist/datepicker.min.css" rel="stylesheet"> <div clas="container"> <input type="text" class="form-control" data-toggle="datepicker"> </div>