3
votes

jQueryUI datepicker ne montre pas les flèches du triangle précédent suivant

J'ai un sélecteur de date associé au champ de saisie en HTML, qui fonctionne très bien. En cliquant sur les triangles, cela génère ce HTML:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

dans mon .ctp (fichier html), je suis en train d'initialiser comme ceci.

$(document).ready(function() {
    $(document).on('focus', ".datepicker", function () {
        if( $(this).hasClass('hasDatepicker') === false )  {
            $(this).datepicker({
                dateFormat : 'yy-mm-dd',
                autoSize: true,
            });
        }
    });
});

Maintenant, de l'autre côté, je crée des champs dynamiques qui sont évidemment des champs de date, mais il n'y a pas d'icônes de flèche pour le changement de date. Je l'initialise dans le fichier JS.

<input name="properties[date_accepted_c]" class="form-control datepicker" data-dateformat="yy-mm-dd">

Au lieu de cela, il crée ce HTML:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="ï”">
    <span class="ui-icon ui-icon-circle-triangle-e">ï”</span>
</a>

javascript jquery-ui jquery-ui-datepicker

4 commentaires

Quelle version de datepicker utilisez-vous?

J'ai essayé votre code et cela fonctionne pour moi. Mais vous avez laissé beaucoup d'informations - vous ne nous avez pas montré votre code HTML initial, comment vous initialisez le premier sélecteur de date ou comment vous ajoutez de nouvelles entrées de sélecteur de date. De plus, si vous consultez la documentation, le code HTML par défaut de jQuery UI datepicker ressemble au deuxième exemple que vous montrez les icônes fonctionnent. Le CSS et les images de votre interface utilisateur jQuery sont-ils corrects?

@ Don'tPanic En html initial, je n'initialise pas, il est initialisé automatiquement en mettant simplement la classe datepicker en html. laissez-moi ajouter le html

J'ai le même problème lorsque j'essaye de le faire localement. Il doit y avoir des icônes à télécharger. Le même problème se produit lorsque vous téléchargez une page Web localement également.

3 Réponses :

1
votes

Si les flèches n'apparaissent pas, il s'agit probablement d'un problème de chargement css. Inspectez le chrome pour rechercher toute exception.

Je n'ai pas pu reproduire votre erreur. Jetez un œil à ce jsfiddle

Il initialise avec succès le sélecteur de date. Si vous inspectez la flèche suivante, vous pouvez voir le code HTML suivant:

<p>Date: <input type="text" class="datepicker"></p>

La seule façon dont je pourrais reproduire votre erreur, en fait, était de supprimer le css datepicker. P >

Détails du DatePicker:

https: //code.jquery.com/ui/1.12.1/jquery-ui.js

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css p >

javascript:

$(document).on('focus', ".datepicker", function () {
  if( $(this).hasClass('hasDatepicker') === false )  {
    $(this).datepicker({
      dateFormat : 'yy-mm-dd',
      autoSize: true,
    });
  }
});

html:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

JQuery: 2.1.3

p >

1 commentaires

Il n'y a aucune erreur dans le css ou dans aucun fichier. Il ne crée tout simplement pas le triangle dans le html lorsque j'ajoute via js.

1
votes

Je sais que c'est un vieux fil de discussion, mais cela m'est arrivé. J'ajoute la raison et comment je l'ai résolu au cas où quelqu'un d'autre pourrait rencontrer ce problème.

Au lieu de télécharger tout le pack à partir de l'interface utilisateur jquery, j'ai téléchargé uniquement des fichiers CSS et JS pour l'interface utilisateur jquery. Mais j'ai découvert que le dossier d'images et les images manquaient. Lors de l'appel à partir de jquery, le problème CDN n'apparaîtra pas car CDN a un dossier d'image à proximité. Vous devez donc télécharger le dossier image et modifier ces lignes dans jquery ui CSS (Ajouter l'emplacement du dossier images).

.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
    background-image: url("images/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
    background-image: url("images/ui-icons_777777_256x240.png");
}

0 commentaires

0
votes

jQuery-ui.css et jQuery-ui.js doivent être inclus dans la page. Au départ, cela peut ne pas être évident, car quand on veut datepicker, il inclut généralement uniquement datepicker.css et datepicker.jss, mais ceux-ci dépendent de ces fichiers jquery-ui.

0 commentaires