Why jquery date picker plugin is not working

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.

2 answers

  • answered 2019-09-10 02:44 Michael

    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.

  • answered 2019-09-10 02:55 Casper

    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>