Twitter Bootstrap Question posted in

Bootstrap: JQuery DateTimePicker not displaying dates-Twitter bootstrap

I am trying to implement a date-time calendar using Bootstrap, and when I’m using the datetimepicker, no dates or times are being made available to select. The libraries needed for datetimepicker are already downloaded and in the respective folders within the directory.

Example of what I'm getting

Here is my code:

 <head>
            <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
            <link href="vendor/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        
            <!-- Custom Fonts -->
            <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
            <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
            <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
            <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
            <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
            <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
            <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
        
            <!-- Theme CSS -->
            <link href="css/agency.css" rel="stylesheet">
        
            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]> -->
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
        
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    </head>
    
    <body>
        <div class='col-sm-6'>
            <div class="form-group">
            <label for="carPUdatetime"> Date and Time: </label>
               <div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUdatetime'>
               <input class="form-control" type="text" required/>
               <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
               </span>
               </div>
            </div>
        </div>
           
        <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap-datetimepicker.js"> .</script>
        <script src="vendor/bootstrap/js/locales/bootstrap-datetimepicker.fr.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#carPUdatetime').datetimepicker();
            });
        </script>
    </body>
Tags:

2

Answers


  1. 0

    Move the id='carPUdatetime' from the div to the input:

    <label for="carPUdatetime"> Date and Time: </label>
   <div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii">
   <input id='carPUdatetime' class="form-control" type="text" required/>
   <span class="input-group-addon">
       <span class="glyphicon glyphicon-calendar"></span>
   </span>
   </div>
</div>

    That’s not exactly an answer to your question, but the value of the for attribute in the label must be an HTML control, not div.

    Apart from that, the code in your question works fine and the dates are displayed.

    If you want to keep the calendar with the div, then give the input a different id from the div:

    <label for="carPUdatetime"> Date and Time: </label>
   <div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUcalendar'>
   <input id='carPUdatetime' class="form-control" type="text" required/>
   <span class="input-group-addon">
       <span class="glyphicon glyphicon-calendar"></span>
   </span>
   </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#carPUcalendar').datetimepicker();
    });
</script>
    Login or Signup to reply.
  2. 0

    Your problem is that you called datepicker on the div and not the input.

    Change 

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

    to

    <input id="testInput" class="form-control" type="text" required/>

    and update your javascript to

    $(function () {
  $('#testInput').datetimepicker();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search