jquery UI DatePicker Time Control conflict resolution _jquery

Because of the rapid development of the company's projects, a lot of things have not been well combed, so that there are many potential problems.
Recently encountered a problem of comparison pits. DatePicker
There are two plug-in libraries in the DatePicker plug-in is more famous. One is Jquery-ui, one is bootstrap. The two API URLs are

However, two of the libraries in the project were used. Then there are the following situations: http://jqueryui.com/datepicker/and http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

Usually do not know what I use in the end is which component.

The main problem is that if you two components can do the same thing, I will have no problem. Two components are completely different in various details.

The problem this time is that my datepicker box is obscured, as shown in the following figure (the year above is switched out):

The discovery was made when the component was rendered, and the z-index:10 was automatically added, and then it was obscured by the top section of the fixed above. However, this is not necessarily the case, the situation on everyone's computer is different, in my opinion is to load the first component of whose components caused. (The items are supposed to be packaged in the order they are referenced in the index.html file, and they should be the same call order, but the order will appear on a subset of computers.) Is there a great God to answer? ）

So to determine which one to load, I wrote the following code to experiment:

Initializes the date control
var $buyDate = $ ("input#abc");
var buydatedatepicker = $buyDate. DatePicker ({
 language: "ZH-CN",
 format: "Yyyymm",
 minviewmode: "Months" ,
 autoclose:true,
 onselect:function () {
  console.log ("a");
 },
 onclose:function () {
  Console.log ("B");
 }
);
$buyDate. On ("Show", function () {
 $ (". Datepicker.datepicker-dropdown.dropdown-menu"). CSS ("Z-index", 1000);
});

Most of these are public, where onselect, OnClose are Jquery-ui, and on-bound show events are bootstrap.

But after a run, I was surprised that none of them had been executed. Then calm down and think about it, it should be so.

1, first executes is the bootstrap component, first renders once more.

2, and then let Jquery-ui render again, but did not overwrite the previous components.

3. The binding of the show event was executed again. However, this time was Jquery-ui again, is not read to listen to the event, arbitrary also invalid.

I reckon that on someone else's computer, the situation is reversed, and the first thing they do is jquery-ui components are OK.

I haven't found anyone on the internet who has written about the conflict. Has anyone ever met to provide a bit of a pit. Avoid stepping on the pit later.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.