web-dev-qa-db-fra.com

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

Comment utiliser jQuery Datepicker avec une entrée de zone de texte:

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

cela ne permet pas à l'utilisateur de saisir du texte de manière aléatoire dans la zone de texte . Je souhaite que le sélecteur de date s'affiche lorsque la zone de texte devient active ou que l'utilisateur clique dessus, mais je souhaite que la zone de texte ignore toutes les entrées utilisateur à l'aide du clavier (copier/coller, ou tout autre). Je souhaite remplir la zone de texte exclusivement à partir du calendrier Datepicker.

Est-ce possible?

jQuery 1.2.6
Datepicker 1.5.2

jquerydatepicker
124
Elliot Vargas

Vous devriez pouvoir utiliser l'attribut readonly sur l'entrée de texte et jQuery pourra toujours en modifier le contenu.

<input type='text' id='foo' readonly='true'>
251
Adam Bellaire

Sur la base de mon expérience, je recommanderais la solution proposée par Adhip Gupta:

$("#my_txtbox").attr( 'readOnly' , 'true' );

Le code suivant ne laissera pas l'utilisateur taper de nouveaux caractères, mais leur permettra de leur permettre de supprimer des caractères:

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

De plus, cela rendra le formulaire inutile pour ceux qui ont désactivé JavaScript:

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

essayer

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

Si vous réutilisez le sélecteur de date à plusieurs endroits, il sera alors possible de modifier la zone de texte également via JavaScript en utilisant quelque chose comme:

$("#my_txtbox").attr( 'readOnly' , 'true' );

juste après/avant l'endroit où vous initialisez votre datpicker.

10
Adhip Gupta
<input type="text" readonly="true" />

la zone de texte perd sa valeur après la publication. 

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

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

EDIT: Pour le faire fonctionner pour IE, utilisez 'keydown' au lieu de 'presser'

6
user213545
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

ajoutez l'attribut readonly dans la requête.

4
Chenthil

Après avoir initialisé le sélecteur de date:

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

        $(".project-date").keydown(false);
4
Umut Esen

Datepicker to popup sur le gain de focalisation:

$(".selector").datepicker({ showOn: 'both' })

Si vous ne souhaitez pas que l'utilisateur entre, ajoutez ceci dans le champ de saisie

<input type="text" name="date" readonly="readonly" />
3
Eduardo Molteni

Vous avez deux options pour y arriver. (Pour autant que je sache)

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

  2. Option B: Change le curseur sur onfocus. Réglez ti sur flou. Pour ce faire, configurez l'attribut onfocus="this.blur()" dans le champ de texte du sélecteur de date. 

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

3
user2182143

Je viens de découvrir cela alors je partage ici. Voici l'option

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Voici le code.

HTML

<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
  <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
  <span class="input-group-addon">
    <span class="glyphicon-calendar glyphicon"></span>
  </span>
</div>

JS

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

Voici le violon:

http://jsfiddle.net/matbaric/wh1cb6cy/

Ma version de bootstrap-datetimepicker.js est 4.17.45

2
Matija

HTML 

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
1
kayz1

Cette sorte de demo le fait en mettant le calendrier sur le champ de texte afin que vous ne puissiez pas le taper. 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" />
1
Zach

Je sais que ce fil est ancien, mais pour les autres qui rencontrent le même problème, qui implémente la solution @ Brad8118 (ce que je préfère, car si vous choisissez de faire une entrée en lecture seule, l'utilisateur ne pourra pas supprimer la valeur de date insérée dans datepicker. s'il choisit) et qu'il doit également empêcher l'utilisateur de coller une valeur (comme suggéré par @ErikPhilips), je laisse cette addition ici, 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-copier-coller-dans-textbox-using-jquery-javascript et tout le script spécifique utilisé par moi (en utilisant plutôt le plugin fengyuanchen/datepicker):

$('[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;
1
Mariana Marica

Au lieu d'ajouter readonly , vous pouvez également utiliser onkeypress = "return false;"

0
Krishnan

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

travaillé comme un charme ..

0
user3661687

Cette question a beaucoup de réponses plus anciennes et en lecture seule semble être la solution généralement acceptée. Je crois que la meilleure approche dans les navigateurs modernes consiste à utiliser le inputmode="none" dans la balise HTML input:

<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é de manière approfondie, mais cela fonctionne bien sur les configurations Android avec lesquelles je l'ai utilisé.

0
Peter Bowers

Je sais que cette question a déjà reçu une réponse et la plupart ont suggéré d'utiliser readonly attribure.
Je veux juste partager mon scénario et répondre.

Après avoir ajouté l'attribut readonly à mon élément HTML Element, j'ai été confronté à un problème qui empêchait de créer cet attribut sous la forme required de manière dynamique.
Même essayé de définir readonly et required au moment de la création de HTML.

Donc, je vous suggère de ne pas utiliser readonly si vous voulez le définir comme required également. 

Utilisez plutôt 

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

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

Ceci permet d’appuyer uniquement sur la touche tab.
Vous pouvez ajouter plus de codes clés que vous souhaitez contourner.

Je code ci-dessous depuis que j'ai ajouté les deux readonly et required il soumet toujours le formulaire.
Après avoir retiré readonly, il fonctionne correctement. 

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

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

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

remplacez l'identifiant du sélecteur de temps: IDofDatetimePicker par votre identifiant.

Cela empêchera l'utilisateur d'entrer d'autres entrées au clavier, mais il pourra quand même accéder à la fenêtre contextuelle de l'heure.

$ ("# my_txtbox"). pression du clavier (function (event) {event.preventDefault ();});

Essayez ceci Source: https://github.com/jonthornton/jquery-timepicker/issues/109

0
Mohan

Voici votre réponse, qui est un moyen de résoudre le problème. Vous ne voulez pas utiliser jquery lorsque vous restreignez la saisie de l'utilisateur dans le contrôle de zone de texte.

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

<input type="text" id="my_txtbox" readonly="true"/>
0
johnkhadka

Au lieu d'utiliser textbox, vous pouvez également utiliser le bouton. Cela fonctionne mieux pour moi, où je ne veux pas que les utilisateurs écrivent la date manuellement.

 enter image description here

0
Ajjay Arora

J'ai trouvé que le plugin jQuery Calendar, du moins pour moi, fonctionne généralement mieux pour sélectionner des dates.

0
James Curran