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

Question

J'ai une configuration de contrôle datepicker à l'aide de l'interface utilisateur JQuery. J'utilise également les thèmes de l'interface utilisateur 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, c'est-à-dire:

<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, utilisez quelque chose comme:

<span class="ui-icon ui-icon-calendar"></span>

Existe-t-il une solution facile à intégrer ou faut-il simplement extraire les styles / images manuellement?

Answer 1

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 le buttonImage :

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

Answer 2

Je l'ai obtenu en faisant cela

$("#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, donc je les supprime également.

Answer 3

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

J'aime

J'ai utilisé cette icône de la belle < un projet href = "http://commons.wikimedia.org/wiki/Tango_icons">> icônes de tango également disponible dans png

Avantages:

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

Answer 4

Le meilleur moyen serait de;

Commencez par utiliser le javascript comme vous l'avez déjà fait.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

Ajoutez ensuite 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 correctement l’image de calendrier, selon vos besoins.

Answer 5

Juste un peu de suivi de 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; 
}

Answer 6

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

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

Answer 7

En empruntant et en prolongeant la réponse de Loktar, vous pouvez essayer quelque chose comme ceci, notez que je n’ai testé cela que dans FF10, mais je ne vois pas pourquoi cela ne fonctionnerait pas dans les 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-caché et date-sélecteur-icône sont mes propres classes, car je n'aime pas dénommer jQuery. Classes CSS directement. Appliquez le code 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;
}

Il s’agit de placer une icône d’envergure jQuery normale derrière le bouton. Le bouton est complètement transparent / opaque (via le CSS), mais comme il est toujours au-dessus de l’icône, un clic sur l’icône déclenche l’événement de clic sur le bouton.

Answer 8

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

Answer 9

changer: pour afficherOn: "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/

Answer 10

Pour choisir manuellement un bouton / une icône, vous pouvez utiliser cet exemple tiré de Comment combiner le déclencheur d'icône de jQueryUI DatePicker avec les groupes d'entrée de Bootstrap 3 pour qu'un événement de clic JS définisse le focus sur la date pertinente champ de saisie, ce qui déclenche l’apparition de la fonctionnalité de date jQueryUI.

Ou, comme l’indique la documentation , vous pouvez utiliser le show pour afficher le sélecteur de date (notez que "Si le sélecteur de date est associé à une entrée, celle-ci doit être visible pour que le sélecteur de date s'affiche.").

$ (".selector") .datepicker ("show");

Ceci vous permet d'utiliser n'importe quel bouton / image / icône à côté d'un champ de saisie et de cliquer sur le bouton / l'image / l'icône pour déclencher la fonctionnalité de date du champ de saisie.

Answer 11

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