bootstrap datepicker date-range not showing on calander
Question
I implemented bootstrap datepicker date-range in the below snippet but I don't see the range showing on the calendar after I have selected a date for start date and end date.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page 2</title> </head> <body> <div class="input-group input-daterange"> <input id="startDate1" name="startDate1" type="text" class="form-control" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> <span class="input-group-addon">to</span> <input id="endDate1" name="endDate1" type="text" class="form-control" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.input-daterange input').each(function() { $(this).datepicker(); }); }); </script> </body> </html>
1 answers
solution1
18 ACCPTED 2016-12-31 12:25:05
you need to add the bootstrap-datepicker css resource as well.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
and use the below syntax for date range.
$('.input-daterange').datepicker({});
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page 2</title> </head> <body> <div class="input-group input-daterange"> <input id="startDate1" name="startDate1" type="text" class="form-control" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> <span class="input-group-addon">to</span> <input id="endDate1" name="endDate1" type="text" class="form-control" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.input-daterange').datepicker({ }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change selectable range for a Bootstrap Datepicker date-range
Using jQuery to create two datepicker date-range instances
jQueryUI datepicker for date-range is failing to validate when date text box is cleared with keyboard
Bootstrap Datepicker not clearing for date range
Bootstrap 4 Datepicker block date range
Bootstrap datepicker date range and default date
Bootstrap datepicker date range end date updating
Firebase date-range query not working
DatePicker Bootstrap lost date range after postback
adjust date range of bootstrap datepicker dynamically
Related Tags