Datepicker de jQuery avec la saisie de texte qui ne permet pas la saisie de l'utilisateur

Vous devriez être en mesure d'utiliser le readonly attribut sur la saisie de texte, et jQuery sera toujours en mesure de modifier son contenu.

<input type='text' id='foo' readonly='true'>

essayer

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

<input type="text" readonly="true" />

causes de la zone de texte à perdre de sa valeur après la publication.

Vous devrait plutôt utiliser Brad8118 de la suggestion qui fonctionne parfaitement.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

EDIT:
pour le faire fonctionner pour IE usage "keydown" au lieu de "touche'

Après l'initialisation du sélecteur de date:

        $(".project-date").datepicker({
            dateFormat: 'd M yy'
        });

        $(".project-date").keydown(false);

Vous avez deux options pour obtenir ce fait. (Autant que je sache)

1. Option A: Faire de votre champ de texte en lecture seule. Il peut être fait comme suit.

2. Option B: Changer le curseur de la souris onfocus. Jeu de ti de flou. il peut être fait par la mise en place de l'attribut onfocus="this.blur()" à la date de votre sélecteur de champ de texte.

Ex: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Ce démo sorte de ne que en mettant le calendrier sur le champ de texte de sorte que vous ne pouvez pas le type en elle. Vous pouvez également définir le champ de saisie pour lire uniquement dans le code HTML pour vous en assurer.

<input type="text" readonly="true" />

Je sais que ce fil est vieux, mais pour d'autres personnes qui rencontrent le même problème, qui mettent en œuvre @Brad8118 solution (ce que je préfère, parce que si vous choisissez de faire l'entrée en lecture seule, alors l'utilisateur ne sera pas en mesure de supprimer la valeur de la date insérée à partir de datepicker s'il choisit) et également de prévenir l'utilisateur de coller une valeur (comme @ErikPhilips suggéré d'être nécessaire), je laisse ce plus ici, ce qui a fonctionné pour moi:
$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); à partir d'ici https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript
et l'ensemble de script spécifique utilisé par moi (à l'aide de fengyuanchen/datepicker plugin au lieu de cela):

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); //prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;

$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});

$("#my_txtbox").prop('readonly', true)

a fonctionné comme un charme..

Je sais que cette question a déjà été résolue, et la plupart ont proposé d'utiliser readonly attribure.

Je veux juste partager mon scénario et de la réponse.

Après l'ajout de readonly attribut à mon Élément HTML, j'ai connu la question que je ne suis pas en mesure de faire ce attribut comme required dynamiquement.

Même essayé de réglage à la fois comme readonly et required HTML moment de la création.

Donc, je suggère de ne pas utiliser readonly si vous souhaitez définir comme required aussi.

Au lieu d'utiliser

$("#my_txtbox").datepicker({
    //options
});

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

Ce qui permet à la presse tab clé seulement.

Vous pouvez ajouter plus de keycodes lequel vous souhaitez contourner.

Je code ci-dessous depuis que j'ai ajouté les deux readonly et required il encore soumet le formulaire.

Après la suppression de readonly il fonctionne correctement.

https://jsfiddle.net/shantaram/hd9o7eor/

JS:

$(function() {
  $('#id-checkbox').change( function(){
  	$('#id-input3').prop('required', $(this).is(':checked'));
  });
  $('#id-input3').datepicker();
  $("#id-input3").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>

<form action='https://jsfiddle.net/'>
Name:  <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
    <input type='checkbox' id='id-checkbox'> Required <br>
    <br>
    <input type='submit' value='Submit'>
</form>

Cette question a beaucoup de anciennes réponses et readonly semble être la solution communément acceptée. Je crois que la meilleure approche dans les navigateurs modernes est d'utiliser le inputmode="none" dans le code HTML des balises d'entrée:

<input type="text" ... inputmode="none" />

ou, si vous préférez le faire en script:

$(selector).attr('inputmode', 'none');

Je ne l'ai pas testé en profondeur, mais il fonctionne bien sur Android configurations je l'ai utilisé avec.

Si vous souhaitez que l'utilisateur de sélectionner une date dans le datepicker, mais vous ne voulez pas à l'utilisateur de taper dans la zone de texte, puis utiliser le code suivant :

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});