web-dev-qa-db-fra.com

Utiliser JQuery UI Datepicker avec les icônes du thème Jquery UI

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?

javascriptcssjquery-ui
29
Craig McGuff

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
});
14
Mathias Bynens

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.

29
Loktar

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

date_picker_example

J'ai utilisé cette icône du Nice icônes de tango projet également disponible en png

Avantages:

  • Indépendant du javascript
  • Charge instantanément avec le DOM
  • Entrées de date future faciles à ajouter
25
Pierre de LESPINAY

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.

3
Muhammed Masood Alingaparambil

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; 
}
1
telb

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 });
0
Webking

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"
});
0
Marc

http://jqueryui.com/demos/datepicker/#icon-trigger

Un très bon exemple avec l'exemple de code est fourni.

0
Nipun

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.

0
evan w

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);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

0
Wilzon