JQuery DatePicker en lecture seule

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

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

Ma solution finale:

Lorsque mon application est chargée, j’initialise le datepicker en tant que tel:

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

J’ai ensuite un bouton de basculement 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!

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

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 parameters 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 = $(''); $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); } }); }; 

Désolé, la solution Eduardos n’a pas fonctionné pour moi. À la fin, j’ai réalisé que datepicker désactivé n’était qu’un champ de texte en lecture seule. Donc, vous devriez le faire en lecture seule et détruire le sélecteur de date. Le champ 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. Cela enlèvera également les sélecteurs de dates.

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

onkeypress => preventdefault …

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 publier correctement sur le serveur et ne devrait affecter aucun des parameters qui lui sont associés.

Travaille pour moi.

  beforeShow: function(el) { if ( el.getAtsortingbute("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 ); } } }, 

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

              
Readonly DatePicker: 
 
Normal DatePicker: