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.

flash
  • 1,455
  • 11
  • 61
  • 132
  • 1
    Have you referred your question before. https://stackoverflow.com/questions/51256634/how-to-make-the-calendar-popup-on-click-of-a-calendar-icon/51257577#51257577 Refer my answer and include those files. – Vignesh Raja Jul 10 '18 at 15:56
  • 1
    Possible duplicate of [How to make the calendar popup on click of a calendar icon ?](https://stackoverflow.com/questions/51256634/how-to-make-the-calendar-popup-on-click-of-a-calendar-icon) – Vignesh Raja Jul 10 '18 at 16:10
  • @VigneshRaja No its a different question. I am trying to see how can I make it work by importing bootstrap files. – flash Jul 10 '18 at 16:18
  • @VigneshRaja I will use your answer as well in order to see how I can use date-picker in a different way. – flash Jul 10 '18 at 16:27

3 Answers3

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.

Alexander
  • 4,420
  • 7
  • 27
  • 42
  • Ok, it worked now but I have some questions so stay tuned. – flash Jul 10 '18 at 16:17
  • So my 1st question is, we are not supposed to use `JS, Popper.js, and jQuery` files from here https://getbootstrap.com/ in order to make date-picker work ? – flash Jul 10 '18 at 16:26
  • Ok, sure. Why the date picker is not working by using the [CDN](https://www.bootstrapcdn.com/)? – flash Jul 10 '18 at 16:35
  • From the code, I can see you have mentioned different CDN apart from the one mentioned in [bootstrap website](https://getbootstrap.com/). – flash Jul 10 '18 at 16:38
  • 1
    @user5447339, becouse there is no datepicker code in that CDN. The [jQuery.fn.datepicker()] function is defined in the [bootstrap-datepicker.js](https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js) file. – Alexander Jul 10 '18 at 16:39
  • Ohk make sense. Thanks for letting me know. I have pushed your code in my [domain](http://ferhan.ferohost.com/). If you check my source code from the domain (CTRL+U, I am pretty sure you know it), I have mentioned script files at the bottom. I think that is the rule of thumb we follow. Let me know if everything looks good there. – flash Jul 10 '18 at 16:43
  • 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 '18 at 16:52
  • 1
    @user5447339, if you want to consider the question about ``s and ` – Alexander Jul 10 '18 at 17:29
  • I have accepted your answer. I will let you know if I have any question. – flash Jul 10 '18 at 17:31
  • Is there any way we can centred the dates which we select in the [domain](http://ferhan.ferohost.com/) ? – flash Jul 10 '18 at 20:30
  • At this moment, the dates which we select is all the way towards the left. – flash Jul 10 '18 at 20:32
  • @user5447339, do you mean text alignment? If yes, then see [How to align texts inside of an input?](https://stackoverflow.com/q/12114570/7914637) topic. – Alexander Jul 11 '18 at 01:54
  • No, not the text alignment. After the dates get selected, I can see it’s all the way stick towards the left. I am talking about the dates which get selected, not the placeholder. – flash Jul 11 '18 at 02:57
  • 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 '18 at 05:45
  • I have a similar [question](https://stackoverflow.com/questions/51414377/how-to-create-a-dropdown-submenu-on-hover-in-bootstrap-4-1). I am wondering if you can have a look. – flash Jul 22 '18 at 17:18
  • how can dates font size/style modify? current font format is looking pathetic – sadia Jan 18 '19 at 06:49
  • @diyasher, the style is defined by CSS. Just override CSS rules to customize it. – Alexander Jan 18 '19 at 07:00
  • ok, I will see it. one more thing I need to set a default date to a calendar and display it in input field can u give me its example if u know. – sadia Jan 18 '19 at 09:17
  • @diyasher, the Stack Overflow is not intended to provide an answer through comments. The concept is [another](https://stackoverflow.com/tour). Please, [take a look around](https://stackoverflow.com/search) and if you don't find a useful answer then [ask a new question](https://stackoverflow.com/help/how-to-ask). – Alexander Jan 18 '19 at 15:21
  • @Alexander thanks a lot for increasing my knowledge.and guide me to a right path. – sadia Jan 19 '19 at 13:33
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"/>
xTrimy
  • 804
  • 9
  • 23
-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>
user1842947
  • 1,047
  • 1
  • 11
  • 16