Jak zmienić wartość indeksu JQuery UI Datepicker?

Question

Jestem zmuszony użyć starszej wersji jquery ui, która jest 1.8.10. Datepicker w tej wersji miał błąd wewnątrz ustawienia z-index, który czasami pojawiał się pod innymi kontrolkami. Po prostu chcę dopasować indeks z dp, aby był widoczny na innych kontrolkach. Podjęto próbę zmiany indeksu z w pliku .js, ale to się nie udało. Przeczytałem, że musisz ustawić tę wartość na zdarzeniu po fakcie, ponieważ wartość zostanie nadpisana, jeśli była wcześniejsza (nie jestem pewien, czy to prawda). Oto przykład, w jaki sposób im tworzenie instancji dp ... i również dołączono timepicker do datepicker.

 $(function() { 
     $("input[id$='txtPreviousCutOff']").datetimepicker({ 
      timeFormat: "hh:mm tt", 
      stepMinute: 5 
     }); 
     $("#dpimage6").click(function() { 
      $("input[id$='txtPreviousCutOff']").datepicker("show") 
     }); 
    }); 

Answer 1

.ui-datepicker-div { z-index: 999999; } 

lub JS:

$(function() { 
    $("input[id$='txtPreviousCutOff']").datetimepicker({ 
     timeFormat: "hh:mm tt", 
     stepMinute: 5 
    }); 
    $("#dpimage6").click(function() { 
     $("input[id$='txtPreviousCutOff']").datepicker("show") 
    }); 
    $('.ui-datepicker-div').css('zIndex', 999999); 
}); 

Answer 2

Trzeba by zastosować style do klasy ui-widget-content

.ui-widget-content 
{ 
    z-index: 100; 
} 

Upewnij się, że klasa dodaje lepszej swoistości tak, że zastępuje on UI styles

#datepicker.ui-widget-content {} 

Answer 3

Użyj tego, aby ustawić datepicker z-index: (nie testowane, ale powinny działać)

$("input[id$='txtPreviousCutOff']").datetimepicker({ 
      timeFormat: "hh:mm tt", 
      stepMinute: 5, 
      beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); } 
     }); 

Answer 4

Wygląda kopii datepicker cokolwiek z-index wartość oryginalny elementu wejściowego. Mogę myśleć o 2 sposoby, aby rozwiązać ten problem:

Non-JS Wystarczy dodać z-index:1051; do atrybutu stylu swojego elementu wejściowego. Jest to oparte na obserwacji, że Bootstrap .modal klasy korzysta z-indeks 1050.

rozwiązania wykorzystujące dynamikę JS Deklarując swoją datepicker, dodanie obsługi beforeShow że pobiera z-index .modal i ustawić DatePicker za Z. -index do 1 wyższego niż:

datepicker({beforeShow: function(inputElem, inst) { 
      var zi = Number($(inputElem).closest('.modal').css('z-index')); 
      $(inputElem).css('z-index',zi+1); 
      }}); 

Answer 5

Ten kod działa dla mnie. Załóżmy, że mam nazwę div dywanu daty "ui-datepicker-div", a klasa apply to "ui-datepicker". Daję więc css, jego pracę za mnie.

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; } 

Answer 6

Wystarczy zmienić CSS:

jak wcześniej to zrobić:

/* Original */ 
.ui-datepicker { width: 17em; padding: .2em .2em 0 } 
/* Modify */ 
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; } 

Dont zapomnij dodać !Important.

To zastępuje wszelkie wewnętrzne style, które są dodawane przez javascript.

nadzieja to zadziała :)

Szczęśliwy Coding

Answer 7

nazwałem tę funkcję, gdy użytkownik kliknie w pole tekstowe używane do kontrolowania datepicker

function textboxWhenClicked(){ 
    $("#textboxid").datepicker(); 
    $("#ui-datepicker-div").css("z-index", 999999); 
} 

pracował wielki

-M