Develop Reference

How to make the calendar popup on click of a calendar icon ?

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>

As you are using Bootstrap, I recommend 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
<input id="startdate">
<input id="enddate">

You can try Bootstrap Datepicker
https://jsfiddle.net/codeandcloud/acq7t97c/
or JQuery Datepicker
http://jsfiddle.net/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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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>

datepicker is not a function in bootstrap 4.1

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.

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.

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"/>

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>

Datetimepicker. Doesn't show any timer

I have a situation with datetimepicker. It doesn't show any timer when I click the first icon. The second works. The chrome browser not showing any errors in the development console. Any suggestions ?
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
jQuery:
$(function() {
$('.datetimepicker').datetimepicker({
pickDate: false
});
});
<script src='js/moment.min.js'></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/calendar.js'></script>
<script src="js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">

You can add these as CDNs.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
And use only datepicker:
<script>
$(function() {
$('.form-control').datepicker({
pickDate: false
});
});
</script>
In general, check you library dependencies. Here is more information about it: https://jqueryui.com/datepicker/

The problem is that you were trying to initialise the datetimepicker on the <div> instead of the <input> itself. Try changing your HTML to:
<div class="input-append form-group">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
Note the datetimepicker included on the class attribute of each input..
And in order to initialise all datetimepicker controls at once, use:
$('.datetimepicker').each(function(){
$(this).datetimepicker({
pickDate: false
});
});
EDIT
pickDate: false will disable your datetimepicker, remove this attribute and everything should work as expected.

Bootstrap-Datepicker not working properly

My bootstrap-datetimepicker is not working properly
This question has been asked a lot of times here, but the answers from here, here and here and manny others didn't help me further...
at the top of my webpage in the<head> i'm including:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
and then in my form i want to call him like this:
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
and at the bottom before the </body> tag there is the javascript/jquery part:
<script type="text/javascript">
$('#datetimepicker').datepicker();
</script>
What am i doing wrong ? Can someone correct my mistakes ?

i've read that bootstrap datepicker requires jquery 1.7.1 and up
check this fiddle im using jquery 1.9.1
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

Try wrap plugin initialization in document ready function.
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker').datepicker();
});
</script>

datetimepicker. widget doesn't show

I am trying to repeat example from datepicker documenation on jsfiddle
tutorial
I have wrote the following html code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
and following js:
$(function () {
$('#datetimepicker1').datetimepicker();
});
but when I start it I see simple input:
demo
What did I forget ?
P.S.
I wrote following html but it doesn't work
<html>
<head>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"
rel="stylesheet">
<script src='//code.jquery.com/jquery-2.1.4.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js'></script>
<script src='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>
<script type="text/javascript">
//Настройка выборок для времени
$(document).ready(function () {
$('#startDateDiv').datetimepicker({
format: 'LT'
});
});
</script>
</head>
<body>
<div class="row-fluid main-content chose" style="padding: 20px 0 67px 0;">
<form:form commandName="campaignBeanDto" id="addParams" method="POST">
<div class="param-line">
<div id="startDateDiv" class="input-append date add-params-date-div">
<fmt:formatDate pattern='dd/MM/yyyy' type='date' value='${campaign.beginDate}' var="beginDate"/>
<form:input path="beginDate" id="startDate" name="beginDate"
data-format="dd/MM/yyyy" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
</form:form>
</div>
</body>
</html>
I don't see any errors in console but I see simple input

You forgot to add moment.js. if you read the documentation clearly it has mention moment.js
Dev Guide
Working fiddle

You forgot to include bootstrap.css and moment.js files,
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js
here is the working fiddle.