Question

我有一个表，我必须在所有行的特定列中使用引导日历。使用该日历的ID可能很麻烦。所以我决定为所有日历分配一个课程并尝试访问日历，但不幸的是它没有弹出。虽然使用id进行硬编码时相同的代码可以完美地工作。这是我正在使用的代码片段： -

＆＃13;

<script>
    $(document).ready(function() {
        $(".datepicker").datepicker({
            autoclose: true,
            startDate: new Date()
        });
    });
</script>

＆＃13;

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

＆＃13;

Answer 1

此代码可以很好地复制此代码并将其另存为xhtml页面，您可以看到显示的日历

<?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>

Answer 2

尝试将类附加到输入而不是div：

<input type="text" class="datepicker form-control" />

Answer 3

您调用了一个名为＆＃34; .datepicker＆＃34;的类。但你从来没有提到应该使用它的地方尝试使用＆＃34; .datepicker＆＃34;一般来说，当我们有多个元素时我们使用类，当你调用单个元素时使用id是一个很好的做法，但无论如何，尝试这个代码

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

无法通过课程访问Bootstrap日历

3 个答案: