web-dev-qa-db-fra.com

Désactiver le réglage de la focalisation pour le sélecteur de date jQuery UI

Il existe une option avec le sélecteur de date jQuery UI pour ouvrir le sélecteur de date uniquement lorsque l'utilisateur clique sur une image de bouton. Voir ci-dessous pour un exemple:

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

Le problème est que le focus est dans le champ de texte dès que le sélecteur de date s'ouvre. Est-il possible de désactiver le réglage de la focalisation?

Lorsque vous utilisez une page comme celle ci-dessus sur un appareil mobile tel qu'un iPhone, le clavier apparaît car le champ de texte est activé. Ce n’est pas vraiment convivial puisque vous devez fermer le clavier pour accéder au datepicker et l’utiliser ...

jquerymobilejquery-mobilejquery-ui-datepicker
19
black666

définir l'entrée sur ReadOnly 

<input type="text" id="datePicker" readonly>
43
Michal Shulman

Je rencontre le même problème avec une application sur laquelle je travaille. J'ai commenté ces lignes de mon fichier jQuery pour l'empêcher de définir automatiquement le focus sur le champ de texte immédiatement après avoir cliqué sur l'icône de mon calendrier. Cela a fonctionné pour mon application.

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}
1
Walt

Vous avez obtenu le résultat souhaité en définissant l'option datepicker showOn sur "none".

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

L'implémentation datepicker comprend les valeurs "focus", "button" et "les deux" pour l'option showOn. La valeur par défaut est "focus". Donc, techniquement, toute valeur autre que ces 3 devrait fonctionner. Attention, une fois la fonctionnalité par défaut remplacée, il vous incombe de gérer le bon affichage du calendrier du sélecteur de date.

1
Anurag Joshi

Si vous désactivez la saisie, le clavier ne s'ouvre jamais. Comme...

    <input type="text" id="date_picker_field" name="date" disabled/>
1
user981971

Si vous utilisez jQuery Mobile - , vous voudrez probablement essayer quelques datepickers orientés mobiles. J'utilise l'expérimental jQueryUI datepicker mobile (from alpha 4) après avoir essayé plusieurs des autres parce que nous voulions une belle vue du calendrier. En gros, il ajoute simplement quelques classes CSS ajoutées au datepicker existant. J'utilise la version Edited afin que cela fonctionne comme un popup. Pour empêcher l’ouverture du clavier, j’ajoute simplement un événement jQuery blur $this.blur() juste après qu’il ait reçu la mise au point, avant que le sélecteur ne s’affiche. L'événement de flou se produit assez rapidement pour que le clavier ne s'ouvre jamais.

Si non - Vous voudrez probablement faire la même chose. Je ne suis pas au courant d'un moyen de le faire sans éditer le code cependant.

1
Danny C

J'ai eu la version minifiée v1.11.4 et jquery-ui.min.js j'ai trouvé deux fois 

datepicker._shouldFocusInput(t)&&t.input.focus()

J'ai supprimé &&t.input.focus() et cela fonctionne bien.

Également d’intérêt pourrait être:

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

Vous cherchez toujours un correctif sans changer les fichiers de base ...

0
PiTheNumber

J'ai trouvé une solution de contournement en désactivant le champ de saisie avec jQuery avant d'ouvrir le sélecteur de date et de l'activer au bout de 100 ms:

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

Testé sur Chrome et également avec Cordova sur Android 5.1.1.

0
Bjoerg

J'ai connu la même chose lorsque des claviers/claviers apparaissent avant que je puisse choisir une date lors d'un test sur des appareils mobiles. Je viens d'ajouter un attribut readonly = "true" à l'intérieur 

Cependant, veillez à éditer le CSS et à spécifier le curseur: curseur: il affiche un point d'interrogation chaque fois que vous passez la souris sur le bureau.

0
iamhonee