jQuery UI datepicker - ajouter du texte statique sous le calendrier?

Question

Ceci est celui qui apparaît lorsque vous cliquez sur l'élément d'entrée lié. Je veux être en mesure d'insérer du texte statique sous la table des dates qui apparaîtront et rester même si l'utilisateur fait défiler les différents mois.

j'ai réussi à trier de se travailler par, avec jQuery, en utilisant

$('.ui-datepicker').after('text'); 

Sur la classe .ui-datepicker. Le problème était que cela ne fonctionnait pas lorsque l'utilisateur faisait défiler le mois suivant. J'ai également réussi à résoudre ce problème en effaçant et en rajoutant constamment le texte avec setTimeout. C'était vraiment hacky, mais ça a marché.

Le problème suivant est survenu lorsque j'avais plusieurs calendriers sur la page, chacun avec des textes différents. J'ai essayé de cibler des instances spécifiques sur .ui-datepicker avec la méthode ci-dessus, mais j'ai découvert qu'il n'y a en réalité qu'une seule instance de la datepicker qui est partagée entre tous les champs de calendrier sur la page.

Alors, est-ce réellement possible?

Answer 1

Vous devez créer une variable pour contenir l'instance du programme datepicker. Ainsi, lorsque vous créez, faites ceci:

solution

var myDatePicker = $("#myDatePickerElement").datepicker(); 
myDatePicker.after("text"); 

Answer 2

Un pour présenter différents textes sur plusieurs datepickers sur la même page est de créer les détenteurs de données à côté de l'identifiant/espace de classe de chaque emplacement de datepicker. Ensuite, chargez le contenu des données pour le sélecteur de date sélectionné en utilisant (ceci).

Exemple code html: Le support de données contient le texte spécifique à afficher pour le datepicker associé comme ceci:

<p>Date1: <input type="text" class="datepicker" 
      data-dptxt="the text1 to display in datepicker" ></p> 

<p>Date2: <input type="text" class="datepicker" 
      data-dptxt="the Second text to display" ></p> 

Exemple de code jQuery: Ensuite, l'injection de texte jQuery dans le sélectionné datepicker calendrier serait quelque chose comme ceci:

$(".datepicker").datepicker() 
    .on("click", function() { 
     var dTxt = $(this).data('dptxt'); 
    $('.ui-datepicker-calendar').after('<span class="middle">'+dTxt+'</>'); 
}); 

J'ai ajouté un petit format CSS Pour que vous puissiez facilement voir le texte semi-dynamique supplémentaire entre les deux datpickers.

Voir mon travail jsFiddle solution en action (images ci-dessous à partir du lien jsFiddle :)

http://web-asylum.com/help-images/datepicker-extra-text-jquery0.jpg http://web-asylum.com/help-images/datepicker-extra-text-jquery.jpg