CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Galuh Landys
Galuh Landys

Reputation: 66

Bootstrap datetimepicker showClose does not work

I am using this datetimepicker. I would like to display the close button, but I cannot the see it on the inline mode. Can anyone please help? Here is my code.

     $(function () {
             $('#datetimepicker1').datetimepicker({
                 sideBySide: true,
                 showClose: true
             });
         });
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
    <script type="text/javascript"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<form name="form1" id="form1" style="width :200px;">
  <div class='input-group date' id='datetimepicker1' style ="margin :10px;">
    <input name="TextBox1" type="text" id="TextBox1" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
  </div>
</form> 
</body>
</html>

Upvotes: 4

Views: 1997

Answers (2)

Nick RB
Nick RB

Reputation: 132

You can force the toolbar with the close button to display when usingsideBySide by setting toolbarPlacement to "top" or "bottom".

$(function () {
    $( "#datetimepicker1" ).datetimepicker({
        sideBySide: true,
        toolbarPlacement: "bottom",
        showClose: true
    });
});

Upvotes: 3

Sherly Febrianti
Sherly Febrianti

Reputation: 1147

Try this :

 $(function () {
      $('#datetimepicker1').datetimepicker({
          showButtonPanel: true,
          closeText: "Ok",
          onSelect:function(event){
              event.preventDefault();
              // blah blah blah
          }
      });
  });

Upvotes: 0

Related Questions