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.
3 Answers
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=""></script>
<link rel="stylesheet" href="" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="" />
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="" />
<script src=""></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=""></script>
or
Microsoft CDN:
<script src=""></script>
Also add this:
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href=""/>
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 :
From the "Installing" section :
<head>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="" />
</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>
