日期时间选择器不起作用

Question

我遇到了日期时间选择器的问题。当我点击图标时它不显示任何日历。

chrome 浏览器在开发控制台中未显示任何错误。

<script src="Scripts/jquery-2.1.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment.js"></script> 
<link href="css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/bootstrap-datetimepicker.js"></script> 
<script src="Scripts/bootstrap-select.min.js"></script>

 <div class="row cuadrado">   
      <div class="col-md-4 col-sm-6 col-xs-1"><h4>Fecha de Nacimiento :</h4></div>        
       <div class="col-md-8 col-sm-6 col-xs-1">               
            <div class="input-group date" id="datetimepicker1">
                <input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>      
       </div>  
   </div>

 $(function () {
        $('#datetimepicker1>input').datetimepicker({
            format: "yyyy-mm-dd"
        });   
        });

Answer 1

首先只包含 jquery ui.min.js 文件，例如

<link href="Contents" src="Scripts/jquery-ui-2.1.1.min.js">

然后按照如下所述编写相应的代码：

$("#datetimepicker1").datepicker({
  dateFormat: "dd,MM,yy",
  showOn: "button",
  buttonText: "Select Date",
  changeYear: "true",
  changeMonth:"true"
});

Answer 2

如果您为输入提供适当的 id 并将 datetimepicker 插件绑定到它，就会容易得多。

HTML

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            <label for="date">Date</label>
            <div class="input-group">
            <input name="date" type="text" id="my-date" class="form-control form-date">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>
    </div>
</div>

JS

$( '#my-date' ).datetimepicker( { format: 'MM-DD-YYYY' } );

这是一个有效的 JSFiddle

Answer 3

添加class="form-group"，这对我有用，但我不知道为什么

 <div class="form-group">
    <div class="input-group date" id="datetimepicker1">
                <input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
     </div>    
</div>

日期时间选择器不起作用

Datetimepicker doesn't work

javascript

jquery

twitter-bootstrap

datetimepicker

HTML

JS