Je suis obligé d'utiliser une version plus ancienne de JQuery UI, qui est 1.8.10. La datePicker dans cette version avait un bogue à l'intérieur du paramètre Z-Index qui l'a parfois fait apparaître sous d'autres contrôles. Je voulais simplement ajuster l'index Z de la DP afin qu'il apparaisse sur les autres commandes. J'ai tenté de changer l'index Z dans le fichier .js, mais cela a échoué. Je suis lu que vous devez définir cette valeur sur l'événement Aftershow car la valeur sera écrasée si elle sera précédemment (pas sûre si cela est vrai). Voici un exemple de la manière dont je crée une instance de la DP ... J'ai également joint un temps d'horaire à DatePicker.
$(function () {
$("input[id$='txtPreviousCutOff']").datetimepicker({
timeFormat: "hh:mm tt",
stepMinute: 5
});
$("#dpimage6").click(function () {
$("input[id$='txtPreviousCutOff']").datepicker("show")
});
});
7 Réponses :
$(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);
});
Je suis allé c'est la méthode et ça marche jusqu'à présent! Toutes les 3 sont de bonnes réponses, j'espère pouvoir tous les vérifier :)
Je devais faire # ui-datePicker-div pour spécifier l'élément par ID (ils sont tous nommés de manière identique dans notre version de jQuery).
Ceci est un peu hacky car il peut y avoir un .Modal par ponte bootstrap autour qui a z-index: 1050 . Je recommanderais pas Mélanger à la fois, JQuery-UI et Bootstrap à la fois / page / projet entier. Mais passez à une exclusivité pour éviter de telles interférences.
En effet, il peut y avoir, mais la question initiale n'a pas mentionné cela ni l'apporter comme une question, donc je suis allé avec quelles informations que j'avais eues.
Vous auriez besoin d'appliquer des styles dans le contenu Assurez-vous d'ajouter la classe ajoutée avec ui-widget-contenu class ui
Utilisez-le pour définir votre index DatePicker Z: (non testé mais devrait fonctionner)
$("input[id$='txtPreviousCutOff']").datetimepicker({
timeFormat: "hh:mm tt",
stepMinute: 5,
beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
});
Je pense que cette solution devrait fonctionner, mais tout dépend de la version de JQuery (peut-être). En 1.9, la version que j'utilise ATM, cela ne fera pas, pour la fonction de présenter DatePicker, "_showdatePicker" est appelée après la performance et à l'intérieur de quelle fonction il définit le z-index de DatePicker, qui remplace l'index z. Nous remplissons dans des spectateurs. N'a pas vérifié une autre version.
On dirait que DatePicker copie quelle que soit la valeur de l'index Z de votre élément d'entrée d'origine. Je peux penser à 2 façons de résoudre ce problème:
non-JS fort>
Il suffit d'ajouter Solution dynamique à l'aide de JS forte>
Lors de la déclaration de votre satdatPicker, ajoutez un gestionnaire de PEFORSHOW qui récupère l'index z de z-index: 1051; code> à l'attribut style de votre élément d'entrée. Ceci est basé sur l'observation que bootstrap .Modal code> classe utilise un z-index de 1050. p> .Modal code> et définissez DatePicker's z-index sur 1 supérieur à celui: p> datepicker({beforeShow: function(inputElem, inst) {
var zi = Number($(inputElem).closest('.modal').css('z-index'));
$(inputElem).css('z-index',zi+1);
}});
Ou évitez d'utiliser BS2 / 3 + JQuery-UI en même temps et passez à l'une d'elles exclusivement.
Ce code fonctionne pour moi. Supposons que j'ai dat-sélecteur div nom "ui-date-datepicker-div" et la classe s'applique est "Ui-DatePicker". Donc, je donne le CSS comme, son travail pour moi.
Changer simplement le CSS:
comme avant, faites ceci: n'oubliez pas d'ajouter espère que cela fonctionnera :) Codage heureux > ! IMPORTANT < P> Ceci remplace tout style en ligne qui est ajouté par le JavaScript .
J'ai appelé cette fonction lorsque l'utilisateur clique sur la zone de texte utilisée pour contrôler le datationPicker a fonctionné super -m