CODEWITHSUNDEEP
jquerytwitter-bootstrapdatepicker
Deepak Keynes
Deepak Keynes

Reputation: 2329

Bootstrap date picker not working

I used the following code and its not working . 

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

and inside body I have called using the id "pickydate". I could not get the proper bootstrap datepicker, though i added the css and js files to my file. what should be the cause of its not working.. let me be guided..

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

bootstrap Datepicker Not working properly

Upvotes: 0

Views: 962

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

The code you have provided is correct. I think you might have provided incorrect URL for Datepicker javascript file or CSS file. This is the working example for your question.

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

Also in the question it seems that the date picker is put inside a modal dialogue. In that case please verify that the z-index of the date picker is greater that the z-index of modal popup. If z-index of the modal popup is greater than z-index of date picker, the date picker will go behind modal popup.

Upvotes: 0

Vally Pepyako
Vally Pepyako

Reputation: 141

You forgot to connect data-picker css

Upvotes: 3

Related Questions