I am working on the website in which I want to popup the calendar on hitting calendar icon.

The HTML code which I have used in order to place Start Date and End Date are:

<div class="dates">
   <div class="start_date">
      <input class="form-control start_date mb-4" type="text" placeholder="start date">
      <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">
      <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
   </div>
</div>

Problem Statement:

I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below).

I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

I am working on the website in which I want to popup the calendar on hitting calendar icon.

The HTML code which I have used in order to place Start Date and End Date are:

<div class="dates">
   <div class="start_date">
      <input class="form-control start_date mb-4" type="text" placeholder="start date">
      <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">
      <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
   </div>
</div>

Problem Statement:

I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below).

I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

• javascript
• jquery
• html
• css
• datepicker

• you might want to use the proper id and bind the datetimepicker plugin to it. check this out: jsfiddle/go6ygh6q – alfonzjanfrithz Commented Jul 10, 2018 at 3:13
• @alfonzjanfrithz Is the fiddle working ? – flash Commented Jul 10, 2018 at 3:13
• yes, perfectly fine from my side.. – alfonzjanfrithz Commented Jul 10, 2018 at 3:17
• 1 @user5447339 I suggest you go with Vignesh Raja's solution down there. It would be better showing the pop up on focus on the input field instead of using a click event on the calendar icon. This allows the user either to choose from the calendar or to type in the date. – Sreekanth Reddy Balne Commented Jul 10, 2018 at 5:28
• I have pushed Vignesh Raja changes in my domain but it doesn't seems to work. I am getting the following error Uncaught TypeError: $(...).datepicker is not a function at ferhan.ferohost./:231 Can you have a look at my code what mistakes I am doing ? You can view my source code by pressing CTRL+U in chrome browser, I am pretty sure you know that. – flash Commented Jul 10, 2018 at 15:14

4 Answers 4

As you are using Bootstrap, I remend using Bootstrap Datepicker.

In your site, give an id to the date input fields and initialize as below.

$(document).ready(function(){
    $("#startdate").datepicker();
    $("#enddate").datepicker();
});

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

<input id="startdate">
<input id="enddate">

You can try Bootstrap Datepicker

https://jsfiddle/codeandcloud/acq7t97c/

or JQuery Datepicker

http://jsfiddle/klenwell/LcqM7/

It looks like you are using jQuery's datepicker?

You are trying to execute this line

$( "#datepicker" ).datepicker();

but you don't have any element with an id datepicker.

Try adding the id datepicker to your input if you want the entire input to change into datepicker on click. Added id datepicker to your input with the class start_date.

<div class="dates">
  <div class="start_date">
    <input class="form-control start_date mb-4" type="text" placeholder="start date" id="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">
    <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
  </div>
</div>

Just an Id to the Calendar icon and click action to the corresponding icon using javascript

        $(document).ready(function() {
          $('#calendar1').click(function(event) {
            $('.start_date').datepicker('show');
          });


          $('#calendar2').click(function(event) {
            $('.end_date').datepicker('show');
          });
        });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">

    <div class="container">
    <div class="row">
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar1">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
        </div>
    </div>
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar2">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
        </div>
        </div>
        </div>
        </div>