更新面板中的Bootstrap DateTimePicker不起作用

时间:2013-09-09 08:31:35

标签: asp.net twitter-bootstrap

我似乎无法在更新面板内部使用此datetimepicker(http://tarruda.github.io/bootstrap-datetimepicker/#)。它在更新面板之外时有效。有什么想法吗?

编辑:这是标记

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
     -- Some stuff here --

        <div id="pnlModal" class="modal hide fade in" style="display: none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">x</a>
                <h3>Edit Time In</h3>
            </div>
            <div class="modal-body no-space">
                <div class="span4">
                <asp:Image ID="imgPic" runat="server" style="width:200px;"  ImageUrl="~/assets/img/nopic.png" CssClass="pictu" /><br />
                </div>
                <asp:Label ID="lblKey" runat="server" Visible="false" />
                <h5><asp:Label ID="lblIDNumber" runat="server" Text="[ID Number]" /></h5>
                <h4><asp:Label ID="lblName" runat="server" Text="[Name]" /></h4>
                <h4><asp:Label ID="lblChiName" runat="server" Text="[ChiName]" /></h4>


                <asp:Label ID="lblAddress" runat="server" Text="[Address]" /><br />
                Time In: <asp:Label ID="lblTimeIn" runat="server" Text="[TimeIn]" />

                <div id="datetimepicker3" class="input-append">
                    <input data-format="hh:mm:ss" type="text"></input>
                    <span class="add-on">
                         <i data-time-icon="icon-clock" data-date-icon="icon-calendar"></i>
                    </span>
                </div>     
                <script type="text/javascript">
                    $(function () {
                         $('#datetimepicker3').datetimepicker({
                         pickDate: false
                       });
                   });
               </script>                         
            </div>
            <div class="modal-footer">                           
            </div>
        </div>

    </ContentTemplate>
</asp:UpdatePanel>

1 个答案:

答案 0 :(得分:3)

我认为您的问题是您将JavaScript包含在UpdatePanel中。

question开始,您需要将JavaScript移到updatepanel之外,如下所示:

<script type="text/javascript">
    function pageLoad(sender, args) {
        $('#datetimepicker3').datetimepicker({ pickDate: false });
    }      
</script>