Comment envelopper le datepicker dans une nouvelle div?

J'ai besoin de mettre mon datepicker dans une nouvelle div, qui sera un (ombre)border-div.

J'ai essayé ce qui suit:

beforeShow: function (input) {
  $(input).datepicker("widget")
   .find(".ui-datepicker-header, ui-datepicker-calendar")
   .wrapAll("<div class='datepickerBorder'/>");
}

Mais il ne fonctionne pas.

De plus, j'ai essayé d'envelopper l'ensemble du sélecteur, mais alors le border-div a pas la même position, la taille, etc.

  • Entendez-vous le datepicker (calendrier) de l'élément lui-même?
  • Je veux dire le datepicker lui-même. Mais quand j'enveloppe le sélecteur de lui-même, puis à la frontière de la div n'a pas la même position, la taille, etc. de la datepicker. À cause de cela, j'ai pensé à envelopper les éléments enfants.
InformationsquelleAutor Keith L. | 2012-05-30
  1. 5

    Le contrôle datepicker est en position absolue. Enveloppant à l'intérieur d'un élément ne sera pas contenir le datepicker l'intérieur de cet élément -- l'élément d'habillage sera tout simplement s'asseoir au bas de la page alors que le datepicker rendra à côté du contrôle.

    Solution 1: Vous pouvez ajouter la classe pour le composant lui-même:

    $("#datepicker2").datepicker({
    beforeShow: function() {
        $(this).datepicker("widget").addClass("datepickerBorder");
    },
    onClose: function() {
        $(this).datepicker("widget").removeClass("datepickerBorder");
    }
});

    démo

    Solution 2: créer un positionnement absolu + caché emballage div sur les DOM load et re-position + re-taille de la div derrière le datepicker quand il montre. Il y a un hic: vous ne pouvez pas vérifier le widget de l'offset (les coordonnées à qui il va rendre) à l'intérieur de la beforeShow fonction.

    • la solution 1 est à travailler, mais pas vraiment de la résolution de mon problème. Parce que j'ai besoin de deux bordures (un normal et un pour une "ombre") et on est toujours écrasée par l'autre. solution2 est pour mes besoins, mais le problème avec le décalage rend inutilisable. Est-il une chance d'obtenir le décalage?
    • Aucune idée, peut-être vous pouvez utiliser setInteval à l'intérieur de la beforeShow; vérifiez le composant de la position 100 millisecondes après beforeShow a été congédié.
    • La chose avec setTimeout à l'intérieur de beforeShow est la moindre idée!
    • Solution 1 semble inutile pour moi. jQuery INTERFACE est entièrement personnalisable avec des thèmes, si vous voulez par exemple une grosse bordure rouge puis juste .ui-datepicker { border:solid 10px red; } jsfiddle.net/VxNQW
    InformationsquelleAutor Salman A
  2. 3
    $('#datepicker').wrap('<div class="datepickerBorder"/>');

    Ici #datepicker est le id de datepicker champ de saisie, vous peut avoir quelque chose d'autre.

    Vérifier jQuery .wrap().

    Vous n'avez pas besoin de le faire dans les beforeShow(). Le faire dans les DOM prêt de la fonction.

    À enrouler chaque intérieur de l'élément de datepicker vous devriez essayer

    $('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');
    • l'emballage est de travail. Mais ensuite, le border-div n'a pas la même position, la taille, etc. de la datepicker. À cause de cela, j'ai pensé à envelopper les éléments enfants.
    • merci. Mais comme vous pouvez le voir ici: suckmypic.net/5sUoo9sm.png aucun élément d'habillage si j'essaye d'enrouler les enfants 🙁
    InformationsquelleAutor thecodeparadox