1

I have a table where i have to use a bootstrap calendar in a particular columns in all the rows. Using a id for that calendar could be cumbersome. So i decided to assign a class to all the calendar and tried accessing the calendar but unfortunately it doesn't pop-up. While the same code when hard-coded with the id's work perfectly. Here is the code snippet i am using:-

<script>
    $(document).ready(function() {
        $(".datepicker").datepicker({
            autoclose: true,
            startDate: new Date()
        });
    });
</script>
<td>
    <div class="form-group">
        <div class="input-group datepicker date">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
       <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</td>
Sushil
  • 2,837
  • 4
  • 21
  • 29
user1711472
  • 15
  • 7
  • Seems to be working: http://jsfiddle.net/66e63v88/. Are you sure you have loaded jquery and bootstrap-datepicker.min.js? – Mark Leiber Jun 04 '15 at 18:23

3 Answers3

1

This code works absolutely fine copy this code and save it as a xhtml page and you can see the calendar displayed 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<title>BootStrap Code for the Calendar</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div  class='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('.datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>
</body>
</html>
Sampath
  • 403
  • 6
  • 17
0

Try to attach the class to the input instead of the div:

<input type="text" class="datepicker form-control" />
Rudi
  • 2,987
  • 1
  • 12
  • 18
0

You have called a class named ".datepicker" but you have never mentioned where it should be used try using the ".datepicker" , in general we use class when we have multiple elements, it is a good practice to use id when you are calling a single element but anyways,try this code

 <div class="form-group">
    <div class="datepicker">
          <input type="text" class="form-control" />
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
            </span>  <div></div>
Sampath
  • 403
  • 6
  • 17