加载小部件时单击日期选择器不显示

Question

I have 3 datepickers on the screen (start, end, due date), all 3 have an icon and text box which show a datepicker when either icon or text box is clicked. When i have a stopwatch widget running on the screen clicking any of the text boxes will load datepicker, but clicking any of the icons won't. If i get the date picker to appear by clicking on the text box; all 3 date picker icons will start to work.

$("#StartDate").datepicker("show"); works, but doesn't work when the stopwatch widget is loaded, but works if any datepicker is loaded by clicking a text box (ie: load due date datepicker by clicking the text box, afterwards i can click the start date icon and date picker will show).

$("#DueDate").datepicker({
showButtonPanel: false,
showOn: 'both',
buttonImage: $Url.resolve("~/Content/Images/calendar-small.png"),
buttonText: "Select date",
onSelect: function (dateText) {
changeInput();
var inp = $(this).parents('.step-input-element');
inp.find('.clear-datepicker').show();
inp.removeClass('date-cleared')
$("#DueDate").datepicker("show");
}
});

Answer 1

it was a z-index issue. When users click on the datepicker textarea or datepicker icon i would set the z-index to a higher value and the datepicker would appear.

Clicking the stopwatch would set new z-index values for certain items, and the datepicker couldn't make it to the foreground because the other things had higher index values.