JQuery DatePicker en lecture seule

Question

Lorsque je mets mon sélecteur de date en lecture seule, je constate que l'utilisateur ne peut rien taper dans la zone de texte.

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

Cependant, ils peuvent toujours modifier la valeur à l'aide du calendrier. Comment puis-je masquer le calendrier afin que les utilisateurs ne puissent pas modifier la valeur de la date ?

Je ne veux pas désactiver le sélecteur de date car j'ai besoin de la valeur publiée sur le serveur lors de la soumission du formulaire.

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

Answer 1

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

Answer 2

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

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

Answer 3

Ma solution finale :

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

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

J'ai alors un bouton à bascule global qui active/désactive le sélecteur de date. Pour désactiver, je fais ce qui suit :

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

Pour l'activer, je fais ce qui suit :

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

Merci tout le monde!

Answer 4

Toutes les solutions répertoriées offrent une expérience utilisateur médiocre ou causent des problèmes si vous souhaitez réactiver le sélecteur de date avec ses paramètres intacts. J'ai utilisé une méthode similaire à la création d'une sélection en lecture seule, qui consiste à la désactiver mais à ajouter 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);
        }
    });
};

Answer 5

J'ai résolu ce problème avec le sélecteur. Je n'initialise pas le sélecteur datetime sur les entrées qui sont en lecture seule.

 $('[type=datetime]:not([readonly])').datetimepicker();