31522

jquery datePicker not working inside bootsrap popover

Question:

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

Answer1:

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

Recommend

  • Using RequiredFieldValidator to check if at least one of the two textboxes has some text inside?
  • How do you copy the contents of a Cell into the Clipboard
  • SelectedIndexChange Not Firing
  • Trouble running a parser created using scrapy with selenium
  • Why ValidatorValidate() validates all the RequiredFieldValidator controls on the page?
  • Toggle DIV state localstorage
  • How to set the scrollbar to move at last line in multiline textbox?
  • How to resolve designated initialization error for UITableViewController?
  • How to use compare validator to compare the data between two dropdownlists values?
  • How to change display text in item template based on eval in gridview?
  • Python PIL remove sections of an image based on its colour
  • Nginx rewrite equivalent to Apache RewriteRule that converts URL params into QueryString key/value p
  • Can't connect Entity Framework to local SQL Server Express
  • How to extract a number from a string [duplicate]
  • ASP.NET RegularExpressionValidator, validate on a non-match?
  • How to save dynamically created textboxes and their values
  • Angular - routerLinkActive and queryParams handling
  • Is it possible to get the word under the mouse cursor in a ``?
  • C# List of Panels
  • How to synchronize jQuery dialog box to act like alert() of Javascript
  • How to return DataSet (xsd) in WCF
  • How to add a focus style to an editable ComboBox in WPF
  • Custom validator control occupying space even though display set to dynamic
  • Row Count Is Returning the incorrect number using RaptureXML
  • Email format validation in mvc3 view
  • Insert into database using onclick function
  • Retrieving value from sql ExecuteScalar()
  • Illegal mix of collations for operation for date/time comparison
  • javascript inside java/jsp code
  • Release, debug version and Authorization Google?
  • jquery mobile loadPage not working
  • Web-crawler for facebook in python
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • KeystoneJS: Relationships in Admin UI not updating
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Hits per day in Google Big Query
  • How to stop GridView from loading again when I press back button?
  • Checking variable from a different class in C#