3

I am working on a domain in which I want to make the calendar visible on click of a search input box.

The HTML code which I have used in order to place a input boxes are:

<div class="dates">
   <div class="start_date">
     <input class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
     <span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
     <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
     </div>
</div>


The script files which I have used is:

<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>


Problem Statement:

I am wondering what changes I need to make in the order of script files from my domain in order to make that work.

I have a feeling the script files are placed in a wrong order in my domain.

4

3 Answers 3

10

The bootstrap-datepicker is not a part of the Bootstrap. So,you have to include datepicker plugin code, before use it.

$("#startdate_datepicker").datepicker();
$("#enddate_datepicker").datepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<div class="dates">
  <div class="start_date input-group mb-4">
    <input class="form-control start_date" type="text" placeholder="start date" id="startdate_datepicker">
    <div class="input-group-append">
      <span class="fa fa-calendar input-group-text start_date_calendar" aria-hidden="true "></span>
    </div>

  </div>
  <div class="end_date input-group mb-4">
    <input class="form-control end_date" type="text" placeholder="end date" id="enddate_datepicker">
    <div class="input-group-append">
      <span class="fa fa-calendar input-group-text end_date_calendar" aria-hidden="true "></span>
    </div>
  </div>
</div>

If it's not possible to use CDN, you could place the CSS and JavaScript files of the plugin on your server and link to them.

20
  • Ok, it worked now but I have some questions so stay tuned.
    – flash
    Jul 10, 2018 at 16:17
  • 1
    @user5447339, becouse there is no datepicker code in that CDN. The [jQuery.fn.datepicker()] function is defined in the bootstrap-datepicker.js file.
    – Alexander
    Jul 10, 2018 at 16:39
  • 1
    @user5447339, the best indicator of code correctness is the page that works correctly. Your code works, it is the main thing ;)
    – Alexander
    Jul 10, 2018 at 16:52
  • 1
    @user5447339, if you want to consider the question about <link>s and <script>s ordering, I will recommend you to read Deep dive into the murky waters of script loading article.
    – Alexander
    Jul 10, 2018 at 17:29
  • 1
    There are Internet access problems today in our network. Therefore, I can see your page only from my phone and it looks ok. So, I propose you to create a new post about date alignment. I hope anybody will help you.
    – Alexander
    Jul 11, 2018 at 5:45
2

I think you forgot to add jquery and bootstrap-datepicker to your domain put this codes between <head></head>

Jquery:

Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

or

Microsoft CDN:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

Also add this:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
-2

I've got the same issue. First it was a mismatch beetween datepicker and datetimepicker.

Next I've got a new issue with the datetimepicker and found finally that for bootstrap 4.1 there is a sucessor to bootstrap-datepicker : Tempus Dominus.

The URL web site : https://tempusdominus.github.io/bootstrap-4/

From the "Installing" section :

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>

Next from the "Usage" section :

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.