Question

我使用了以下代码，但它不起作用。

    <!DOCTYPE html>
    <head runat="server">
    <title>Test Zone</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">    </script>

   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pickyDate').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>

并且我在内部使用id＆＃34; pickydate＆＃34;来调用。虽然我将css和js文件添加到我的文件中，但我无法获得正确的bootstrap datepicker。应该是什么原因导致它不起作用..让我受到指导......

 <body>
<div id="testDIV">
    <div class="container">
        <div class="hero-unit">
            <input  type="text" placeholder="click to show datepicker"  id="pickyDate"/>
        </div>
    </div>
</div>

Answer 1

您忘记了连接数据选择器css

Answer 2

您提供的代码是正确的。我想你可能为Datepicker javascript文件或CSS文件提供了错误的URL。这是您问题的工作示例。

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Test Zone</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
    </script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#pickyDate').datepicker({
                format: "dd/mm/yyyy"
            });
        });
    </script>

</head>

<body>
    <div id="testDIV">
        <div class="container">
            <div class="hero-unit">
                <input type="text" placeholder="click to show datepicker" id="pickyDate" />
            </div>
        </div>
    </div>
</body>

</html>

同样在问题中，似乎日期选择器被置于模态对话中。在这种情况下，请验证日期选择器的z-index是否大于模式弹出窗口的z-index。如果模态弹出窗口的z-index大于日期选择器的z-index，则日期选择器将在模态弹出窗口后面。

Bootstrap日期选择器无法正常工作

2 个答案: