5-15 Bootcss Modal and the DatePicker of jquery UI

Recently the company was working on a project with the bootstrap and jquery UI, something similar to what happened with Oa two days ago. I hope the reader will not encounter the same problems as me.

1 DatePicker. Do not know how to download the Bootcss inside did not find DatePicker, so chose the jquery UI DatePicker. There are two questions to keep in mind when using.

If more than one input on the page, and the ID is INPUT1, call $ (' #input1 ') when the page loads. DatePicker (option), the result is that only the first successful format is DatePicker; If you change a selector, For example, $ (' input '). DatePicker (option), then, each can trigger the DatePicker selection effect, however, the following element will be selected after the date only the first one.

2 bootstrap inside the modal. When using a button to trigger modal, there are two properties that must not be forgotten, ①data-toggle= ' modal ' ②data-target= ' #myModal '; by the way, the button's Type property is submit by default, so Remember to assign a button. Then, if you don't want the modal to turn off when you point to the gray area, remember to set modal's Data-backdrop = ' static '. And if there is datepicker in the modal, then, by default, you cannot display the DatePicker date selection box when you click Input. The solution is available in StackOverflow. Link stamp here.

The key JS code is as follows:

1 //Since Confmodal is essentially a nested modal it ' s Enforcefocus method2 //must be no-op ' d or the following error results3 //"uncaught rangeerror:maximum Call stack size exceeded"4 //But then, the nested modal is hidden we reset Modal.enforcefocus5 varENFORCEMODALFOCUSFN =$.fn.modal.constructor.prototype.enforcefocus;6 7$.fn.modal.constructor.prototype.enforcefocus =function() {};8 9$confModal. On (' Hidden ',function() {Ten$.fn.modal.constructor.prototype.enforcefocus =ENFORCEMODALFOCUSFN; One }); A  -$confModal. Modal ({backdrop:false});

About that comment, the general meaning is that modal display must let modal's Enforcefocus method to empty (so-called no-op otherwise there will be an exception. ）。 Then restore it when it is hidden. Then I use the time estimate is the version of different reasons, to be slightly modified. $confModal is the modal of his own.

The key code is as follows:

 1  $.fn.modal.constructor.prototype.enforcefocus = function   () {};  2  var  $configModal = $ (" . Temple " function   4  $. Fn.modal.Constructor.prototype.enforceFocus = ENFORCEMODALFOCUSFN;  

Changed the name of the modal event, checked the document, the event given above is named ' Hide.bs.modal '. If you use Bootcss, the above name or hide, two JS file is not the same. There is the bootstrap trigger modal do not need to write $confmodal.modal ({backdrop: false }); You should complete the event binding at the button step.

　　

Although I know the above two points, but when the page is still appeared in the modal inside the DatePicker "not normal display", there is a "cannot select the date after the issue." Then finally understand, in fact, this modal page has a partialview and model itself modal-content Partialview is the same, resulting in the duplicate ID. Outside the Partialview normal situation is not displayed, so suddenly don't know the cause of the problem, tangled up a lot of time. Fortunately, it's settled now. The solution is to add a specific prefix to the ID of the element inside the modal when modal displays it. About prefixing this thing, because the $.find () method actually checks the descendant elements, that is, $ (' <li>a</li> '). Find (' Li ') actually find nothing, pit yourself a bit ...