jQuery datePicker无法在bootsrap popover内部工作 [英] jquery datePicker not working inside bootsrap popover

问题描述

我有放置HTML内容的弹出框.在侧面弹出框中，我有显示日历的文本框.如果文本框不在弹出框内，但同一功能在弹出框内不起作用，则此方法有效.

I have popover in which I placed html contents. In side popover I have text box which shows calendar. This works if textbox is outside popover but same function not working inside popover.

<div id="status2_popover" class="status-popover" style="display: none">
     <div>
         <span class="field-heading">Confirm Date</span>
         <asp:TextBox ID="TextBox2" runat="server" CssClass="date-time-picker field-pitch in-popover-text-box"></asp:TextBox>
     </div>
</div>

更新

<div id="status1UpdateBox" class="update-box" data-placement='bottom' data-toggle="popover">
                               <strong>Booked</strong> <asp:Label ID="Lblstatus1Date" runat="server" Text="10/10/2016"></asp:Label> <asp:Label ID="LblStatus1Time" runat="server" Text="10.30am"></asp:Label>
                           </div>

<script>
    $(document).ready(function () {
        $('#status1UpdateBox').popover({
            html: true,
            content: function () {
            return $('#status1_popover').html();
        }
     });
   });
</script>

datepicker jQuery

datepicker jquery

$.datetimepicker.setLocale('en');
        $('.date-time-picker').datetimepicker({
            timepicker: false,
            format: 'd/m/Y',
            formatDate: 'Y/m/d',
        });

推荐答案

我假设您正在使用引导程序弹出库?

I assume you are using the bootstrap popover library?

问题可能是当您设置datetimepicker时，弹出框的内容不存在.创建弹出框后，您必须初始化datetimepicker.假设您正在使用引导弹出窗口，则可以这样...

The problem is probably that when you setup the datetimepicker the content of the popover does not exist. You have to initialise the datetimepicker when the popover has been created. Assuming you are using the bootstap popover you could do it like this...

 $('#status1UpdateBox').on("shown.bs.popover", function() {
     var popover = $(e.target).data('bs.popover');
     popover.$tip.find(".date-time-picker").datetimepicker({
        timepicker: false,
        format: 'd/m/Y',
        formatDate: 'Y/m/d',
    });
 })

这篇关于jQuery datePicker无法在bootsrap popover内部工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！