Laravel mix issue: datepicker does not work

Question

The datepicker works on my bootstrap folder. However, when I move everything into laravel, it does not work. I don't really understand that how css and js work in laravel, so that is why I am here :).

/resources/sass/app.scss

//css
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

//js
@import url('https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js');

              <!--DatePicker-->
              <div class="col-md-4">
                <h4 class="">Prefer Date</h3>
                <form>
                    <div class="">
                        <!-- <label for="date" class="col-sm-1 col-form-label">Date</label> -->
                        <div class="">
                            <div class="input-group date" id="datepicker">
                                <input type="text" class="form-control">
                                <span class="input-group-append">
                                    <span class="input-group-text bg-white">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </form>
              </div>
              <script type="text/javascript">
                $(function() {
                    $('#datepicker').datepicker();
              });
              </script>

I have, everything is fine, but the datepicker does not pop up — user16466807
– user16466807, Commented Nov 30, 2021 at 11:00
Shouldn't u use the datepicker on the field itself? So: <input type="text" class="form-control" id="datepicker"> — Ruub
– Ruub, Commented Nov 30, 2021 at 11:10

Bhargav Variya · Accepted Answer · 2021-12-20 12:03:11Z

1

I just copied your code and it worked if you swap this:

<input type="date" class="form-control">

So change the input type from text to date, since it is a Datepicker you are trying to build.

I recently had a similar issue and that is my code for my date picker:

<div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full px-3">
         <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 text-base" for="enddate"> Enddatum </label>
         <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight id="enddate" name="enddate" type="date" placeholder="Enddatum">
    </div>
</div>

edited Dec 20, 2021 at 12:03

Bhargav Variya

7851 gold badge11 silver badges20 bronze badges

answered Nov 30, 2021 at 13:20

Frevelman

6461 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel mix issue: datepicker does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related