Question

我正在使用Bootstrap v3，并希望使用Eonasdan的DateTimePicker。我已经在其他项目中使用它而没有任何问题。我现在的问题是单击输入框时没有显示DateTimePicker。输入框在那里，日期显示在输入框中。只有Picker才会出现。这是我的代码：

HTML：

<div class="col-md-10" id="mSearchValueInput">
    <input id="mSearchValue" type="text" class="form-control date">
</div>

JavaScript的：

<script type="text/javascript">
    $(function () {
        $('#mSearchValue').datetimepicker();
    });
</script>

库的顺序正确（我认为），它们处于原始状态：

<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/moment-with-locales.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>

CSS：

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

但是，我不知道我做错了什么。在我所有的其他项目中，它只是像这样工作。

也许这里有人有想法？

由于

Answer 1

正如@VincenzoC在其中一条评论中所描述的那样，jQuery v3和DateTimePicker的最后一个版本（4.17.37）目前存在问题。

他们suggest使用jquery-migrate-3.0.0.js，我没试过。有一个pull request通过编辑bootstrap-datetimepicker.js中的JavaScript代码来解决这个问题。

Answer 2

master 
<asp:ScriptReference Path="/Scripts/jquery-1.10.2.min.js"/>
<asp:ScriptReference Path="Scripts/jquery-1.10.2.js"/>            
<asp:ScriptReference Path="Scripts/jquery-1.10.2.min.map"/>
<asp:ScriptReference Path="/Scripts/bootstrap.min.js" />
<asp:ScriptReference Path="/Scripts/moment-with-locales.js"/> 
<asp:ScriptReference Path="Scripts/moment-with-locales.min.js"/>
<asp:ScriptReference Path ="/Scripts/bootstrap-datetimepicker.js"/>
<asp:ScriptReference Path ="Scripts/bootstrap-datetimepicker.min.js"/>
<asp:ScriptReference Path ="Scripts/respond.js"/>
<asp:ScriptReference Path ="Scripts/respond.min.js"/>

  <script type="text/javascript">
  function pageLoad() {
          //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    //Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();



    $(document).ready(function () {
        $('#<%=TbInDateTime.ClientID%>').datetimepicker(
        {

            format: "DD/MM/YYYY hh:mm:ss A"

        }
            );


    });

    $(document).ready(function () {
        $('#<%=TbOutDateTime.ClientID%>').datetimepicker(
           {
               format: "DD/MM/YYYY hh:mm:ss A"
           }
            );

    });

}

  <div style="position:relative; text-align:center;">&nbsp;

                 <asp:TextBox ID="TbInDateTime" runat="server" Width="200" EnableViewState="false"></asp:TextBox> 



    </div>

Bootstrap DateTimePicker（Eonasdan）未显示

2 个答案: