2016-11-25 100 views
2

我正在使用此datetimepicker。我想显示关闭按钮,但我不能在内联模式下看到它。任何人都可以帮忙吗?这是我的代码。引导datetimepicker showClose不起作用

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

+0

'sideBySide'和'showClose'不能一起工作,您可以提交错误,因为API没有指定它不是有效的用户案例。这里有一个摆脱'sideBySide'的小提琴https://jsfiddle.net/t45k68ce/ – nottu

回答

0

试试这个:

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

您可以强制使用工具栏的关闭按钮使用sideBySide通过设置toolbarPlacement时显示为 “顶部” 或 “底部”。

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