jquery datePicker在bootsrap popover

时间:2017-01-06 10:25:33

标签: jquery twitter-bootstrap datepicker popover

我有poppos,其中我放置了html内容。在侧面弹出框中,我有显示日历的文本框。如果文本框在弹出窗口外,但同样的功能在弹出窗口内不起作用,则此方法有效。

<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

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

1 个答案:

答案 0 :(得分:1)

我假设你使用的是bootstrap popover库?

问题可能是当你设置datetimepicker时,popover的内容不存在。创建弹出窗口时,必须初始化datetimepicker。假设你正在使用bootstap popover,你可以这样做......

 $('#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',
    });
 })