J'ai une configuration de contrôle datepicker utilisant l'interface utilisateur de JQuery. J'utilise également les thèmes de l'interface utilisateur de JQuery, qui fournissent un ensemble d'icônes par défaut que je souhaite utiliser.
Le DatePicker permet de spécifier une image spécifique, à savoir:
<script type="text/javascript">
$(document).ready(function() {
$("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
});
</script>
Pour afficher une icône du jeu d’icônes, vous utilisez quelque chose comme:
<span class="ui-icon ui-icon-calendar"></span>
Existe-t-il une solution facile à intégrer ou dois-je simplement extraire les styles/images manuellement?
J'ai bien peur que vous deviez le faire manuellement. Par défaut, le plug-in Datepicker utilise le code HTML suivant pour insérer la variable buttonImage
spécifiée:
<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">
Au fait, vous voudrez peut-être utiliser ...
$(function() {
// your code here
});
...au lieu de...
$(document).ready(function() {
// your code here
});
Je l'ai obtenu en faisant ça
$("#DateFrom").datepicker({
showOn: 'button'
}).next('button').button({
icons: {
primary: 'ui-icon-calendar'
}, text:false
});
Modifie simplement le bouton qu'il insère à côté de votre entrée pour le calendrier. Par défaut, ils jettent trois ellipses dans le texte, je les supprime donc également.
Je suggère de mettre l'image dans l'entrée
input.date_picker {
text-align: center;
background-image: url("images/ui-icon-calendar.png");
background-position: right center;
background-repeat: no-repeat;
padding-right: 18px;
width: 78px;
}
Comme
J'ai utilisé cette icône du Nice icônes de tango projet également disponible en png
Avantages:
Le meilleur moyen serait de:
Commencez par utiliser le javascript comme vous l'avez déjà utilisé.
<script type="text/javascript">
$(document).ready(function() {
$("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
});
</script>
Ensuite, ajoutez le code CSS suivant:
<style type="text/css">
.ui-datepicker-trigger
{
padding:0px;
padding-left:5px;
vertical-align:baseline;
position:relative;
top:4px;
height:18px;
}
</style>
Ce css vous aidera à aligner l'image du calendrier correctement selon vos besoins.
Juste une petite suite à la réponse de Evs ... (aide précieuse et merci Evs!).
Cela fonctionne aussi dans IE8, et j'ai ajouté CSS pour changer le curseur en survol:
button.date-picker-button-hidden:hover
{
cursor: pointer;
}
J'ai utilisé ce code jquery pour obtenir un sélecteur de date pour un champ de saisie de texte et une icône d'interface utilisateur jquery pour fonctionner en tant qu'image sur le bouton sélecteur de date.
// Apply jQuery UI DatePicker to all controls with class = datepicker
$('.datepicker').datepicker({
showWeek: true,
dateFormat: "yy-mm-dd",
buttonImage: "ui-icon-calendar",
regional: "sv",
minDate: "-10Y",
maxDate: "+10Y",
showButtonPanel: true,
buttonImageOnly: false,
showWeekNumber: true,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showOn: "both"
}).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });
Pour que cela fonctionne, ajoutez le code HTML pour mon icône directement dans l'option buttonText
et désactivez l'option buttonImage
.
$('.datepicker').datepicker({
showOn: "both",
buttonText: '<i class="icon-calendar"></i>',
dateFormat : "DD, MM d"
});
http://jqueryui.com/demos/datepicker/#icon-trigger
Un très bon exemple avec l'exemple de code est fourni.
En empruntant et en prolongeant la réponse de Loktar, vous pouvez essayer quelque chose comme ceci, notez que je l’ai seulement testé dans FF10, mais je ne vois pas pourquoi cela ne fonctionnerait pas dans d’autres navigateurs.
$('.date-picker').datepicker({showOn: 'button'})
.next('button').addClass('date-picker-button-hidden')
.after($('<span/>')
.addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));
Notez que dans cet exemple, date-sélecteur-bouton-masqué et date-sélecteur-icône sont mes propres classes, car je n'aime pas dessiner directement les classes jQuery CSS. Appliquez le CSS suivant:
span.date-picker-icon
{
display: inline-block;
z-index: -1;
position: relative;
left: -16px;
}
button.date-picker-button-hidden
{
opacity: 0.0;
filter: alpha(opacity=0);
height: 16px;
width: 16px;
margin: 0;
padding: 0;
}
Cela place effectivement une icône de plage régulière jQuery derrière le bouton. Le bouton est complètement transparent/opaque (via le CSS). Toutefois, comme il est toujours au-dessus de l'icône, un clic sur l'icône déclenche l'événement clic du bouton.
changer: afficher showOn: "les deux", // bouton
<input type="text" name="date_from" id="date_from" />
<input type="text" name="date_to" id="date_to" />
$(function() {
$("#date_from").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "both",//button
buttonImageOnly: false,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_to").datepicker("option", "minDate", selectedDate);
}
});
$("#date_to").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "both",//button
buttonImageOnly: false,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_from").datepicker("option", "maxDate", selectedDate);
}
});
});