web-dev-qa-db-fra.com

JQuery DatePicker en lecture seule

Lorsque je mets mon datepicker en lecture seule, je constate que l'utilisateur ne peut rien saisir dans la zone de texte. 

$("#datepicker").attr('readonly', 'readonly');

Cependant, ils peuvent toujours changer la valeur en utilisant le calendrier. Comment masquer le calendrier afin que les utilisateurs ne puissent pas modifier la valeur de la date?

Je ne veux pas désactiver le datepicker car j'ai besoin de la valeur publiée sur le serveur lors de l'envoi du formulaire.

("#datepicker").datepicker('disable');

jquerydatepicker
33
Bob

Vous pouvez définir la plage autorisée sur une plage non valide pour que l'utilisateur ne puisse sélectionner aucune date:

$("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
26
Eduardo Molteni

J'ai défini le gestionnaire d'événements beforeShow suivant (dans le paramètre options) pour obtenir cette fonctionnalité.

beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
69
Code Commander

Ma solution finale:

Lorsque mon application se charge, j'initialise le sélecteur de date en tant que tel:

$('.selector').datepicker({ dateFormat: "mm/dd/yy" });

J'ai ensuite un bouton bascule global qui active/désactive le sélecteur de date. Pour désactiver, procédez comme suit:

$('.selector').datepicker("option", "minDate", -1);
$('.selector').datepicker("option", "maxDate", -2);

Pour l'activer, procédez comme suit:

$('.selector').datepicker("option", "minDate", null);
$('.selector').datepicker("option", "maxDate", null);

Merci tout le monde!

5
Bob

Si vous essayez de désactiver le champ (sans le désactiver réellement), essayez de définir l'événement onfocus sur this.blur();. De cette façon, chaque fois que le champ est mis au point, il le perd automatiquement.

4
Crontab

Toutes les solutions répertoriées offrent une expérience utilisateur médiocre ou génèrent des problèmes si vous souhaitez réactiver le sélecteur de date avec ses paramètres intact. J'ai utilisé une méthode similaire à la création d'une sélection en lecture seule, qui consiste à la désactiver tout en ajoutant un champ masqué du même nom. Vérifie ça:

Usage: 

$("#datepicker").readonlyDatepicker(true); //makes the datepicker readonly
$("#datepicker").readonlyDatepicker(false); //makes the datepicker editable again

fonction jQuery: 

$.fn.readonlyDatepicker = function (makeReadonly) {
    $(this).each(function(){

        //find corresponding hidden field
        var name = $(this).attr('name');
        var $hidden = $('input[name="' + name + '"][type="hidden"]');

        //if it doesn't exist, create it
        if ($hidden.length === 0){
            $hidden = $('<input type="hidden" name="' + name + '"/>');
            $hidden.insertAfter($(this));
        }

        if (makeReadonly){
            $hidden.val($(this).val());
            $(this).unbind('change.readonly');
            $(this).attr('disabled', true);
        }
        else{
            $(this).bind('change.readonly', function(){
                $hidden.val($(this).val());
            });
            $(this).attr('disabled', false);
        }
    });
};
4
Josh Noe

Désolé, mais la solution Eduardos ne fonctionnait pas pour moi ……. À la fin, j’ai réalisé que datepicker désactivé n’est qu’une zone de texte en lecture seule . sera envoyé au serveur lors de la soumission.

Voici un code un peu généralisé qui prend plusieurs zones de texte et les rend en lecture seule . Il supprimera également les sélecteurs de date.

fields.attr("readonly", "readonly");
fields.each(function(idx, fld) {
    if($(fld).hasClass('hasDatepicker'))
    {
        $(fld).datepicker("destroy");
    }
});
2
OzrenTkalcecKrznaric

onkeypress => preventdefault ...

1
Royi Namir
      beforeShow: function(el) {
            if ( el.getAttribute("readonly") !== null ) {
                if ( (el.value == null) || (el.value == '') ) {
                    $(el).datepicker( "option", "minDate", +1 );
                    $(el).datepicker( "option", "maxDate", -1 );
                } else {
                    $(el).datepicker( "option", "minDate", el.value );
                    $(el).datepicker( "option", "maxDate", el.value );
                }
            }
        },
0
mauro

J'ai proposé une autre solution différente de celle proposée. Lorsque le sélecteur de date est utilisé, il crée un div similaire à une fenêtre contextuelle qui est positionnée lorsque l'utilisateur clique sur le champ de saisie. Pour le supprimer, je viens de définir la propriété de visibilité du CSS afin qu'il ne s'affiche pas.

if ($('.yourDatepickerSelector').prop('readonly')) {
    $('#ui-datepicker-div').css({ 'visibility': 'hidden' })
} else { $('#ui-datepicker-div').css({ 'visibility': 'visible' }) }

Cela semble également envoyer correctement sur le serveur et ne devrait affecter aucun des paramètres qui lui sont associés.

0
BBQ Singular
Readonly datepicker with example (jquery) - 
In following example you can not open calendar popup.
Check following code see normal and readonly datepicker.

Html Code- 


<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
                var currentDate=new Date();
                $( "#datepicker-12" ).datepicker({
                  setDate:currentDate,
                  beforeShow: function(i) { 
                      if ($(i).attr('readonly')) { return false; } 
                   }
                });
                $( "#datepicker-12" ).datepicker("setDate", currentDate);
                $("#datepicker-13").datepicker();
                $( "#datepicker-13" ).datepicker("setDate", currentDate);
        });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <p>Readonly DatePicker: <input type = "text" id = "datepicker-12" readonly="readonly"></p>
      <p>Normal DatePicker: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

0
Nandlal Ushir
<sj:datepicker id="datepickerid" name="datepickername" displayFormat="%{formatDateJsp}" readonly="true"/>

Travaille pour moi.

0
Bhimbim