0

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>

UPDATE

<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',
        });
SUN
  • 973
  • 14
  • 38

1 Answers1

1

I assume you are using the bootstrap popover library?

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',
    });
 })
NoseBagUK
  • 345
  • 4
  • 23
  • With your code script gets called but datepicker class not working – SUN Jan 06 '17 at 10:50
  • In your initial question can you provide the code (html) that is used to trigger the popover ("#status1UpdateBox) – NoseBagUK Jan 06 '17 at 11:00
  • Do you find any solution for this? – SUN Jan 06 '17 at 14:25
  • Sorry had to do some actual work, which datetimepicker library are you using? This one.. http://xdsoft.net/jqplugins/datetimepicker/ ? – NoseBagUK Jan 06 '17 at 15:25
  • Yes. I am using that only. – SUN Jan 07 '17 at 04:21
  • Ok I've made a little change the problem with my previous answer was that when a popover displays the content it changes the id of the div, I have modified the code to get the right content div to then initialise the datepicker – NoseBagUK Jan 09 '17 at 10:00