Comment combiner le déclencheur d'icônes jQueryUI DatePicker avec les groupes d'entrée de Bootstrap 3
jQueryUI a une belle DatePicker avec l'icône de déclenchement (une icône de calendrier ouvre le calendrier, un comportement similaire à Outlook).
D'autre part, Bootstrap 3 de l'Entrée des Groupes sont vraiment sympa pour le raccordement d'icônes pour les champs de saisie.
Peut les deux être combinés sans réécriture, soit un?
J'ai fait un JSFiddle ici. Pour la «Date de Début» la jQueryUI icône du déclencheur n'est pas active. Pour la «Date de Fin» elle est activée. Le DatePicker icône, malheureusement, s'affiche à l'extérieur de la Date de Fin de Saisie de Groupe:
Donc, est-il possible d'activer l'Icône de Déclenchement dans le cadre du Groupe d'Entrée (ressemblant à «Date de Début», mais de se comporter comme la «Date de Fin»), sans effort de modification?
Icône principal Déclencheur de code:
$("#datepicker-end").datepicker({
showOn: "button",
buttonImage: "img/calendar.gif",
buttonImageOnly: true
});
Entrée principale code de Groupe:
<div class="input-group">
<input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
source d'informationauteur bjornte
Vous devez vous connecter pour publier un commentaire.
À chercher des solutions à un
datepicker
problème que j'ai été choqué de voir accepté de répondre avec beaucoup de problèmes (et 10 upvotes). Il ne fonctionne que par les effets secondaires.datepicker
sur chaque clic sur l'icôneLa version corrigée devrait ressembler à:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/JHBpd/151/
Remarque: Il est préférable aujourd'hui d'utiliser le raccourci DOM prêt gestionnairedonc, l'exemple devient:
Mise à jour pour supporter de multiples contrôles via des sélecteurs de classe:
Modifier le code HTML pour ceux qui ont des classes et de changer l'orientation des sélecteurs pour sélectionner la zone d'édition par rapport à la touche (à l'intérieur même d'entrée-groupe).
JSFiddle: http://jsfiddle.net/JHBpd/260/
Je pense que vous voulez afficher en haut de jquery ui datepicker sur bootstrap icône de déclenchement, si c'est le cas ici, est la solution. Démo JSFiddle
JS:
Je préfère utiliser
label
tag avecfor
attribut pour sélectionner le champ de saisie.Plus de détails et d'exemples: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
La valeur de
for
attribut sera l'ID d'un labelable formulaire élément lié, par exemple,input
. Dans mon comprendre qu'il portera à votre entrée, depuis l'entrée déjà les déclencheurs de la date-picker. Ainsi, le travail est fait.JSFiddle: https://jsfiddle.net/om01kgk5/1/