jQuery Datepicker avec saisie de texte qui n'autorise pas la saisie utilisateur

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

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

Cela ne permet pas à l'utilisateur d'entrer du texte aléatoire dans la zone de texte. Je veux que le Datepicker apparaisse lorsque la zone de texte se concentre ou que l'utilisateur clique dessus, mais je veux que la zone de texte ignore toute entrée utilisateur utilisant le clavier (Copier et Coller, ou tout autre). Je veux remplir la zone de texte exclusivement à partir du calendrier Datepicker.

Est-ce possible?

Jquery 1.2.6
Datepicker 1.5.2

122
demandé sur informatik01 2008-09-30 20:08:24

21 réponses

Vous devriez pouvoir utiliser l'attribut readonly sur la saisie de texte, et jQuery pourra toujours modifier son contenu.

<input type='text' id='foo' readonly='true'>
244
répondu Adam Bellaire 2011-03-18 17:24:12

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

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

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

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

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

<input type="text" readonly="true" />
56
répondu 2046 2014-11-17 22:11:15

Essayez

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
11
répondu Brad8118 2008-09-30 16:21:26

Si vous réutilisez le sélecteur de date à plusieurs endroits, il serait approprié 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 datepicker.

10
répondu Adhip Gupta 2009-11-17 11:16:11
<input type="text" readonly="true" />

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

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

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

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

6
répondu 2009-11-19 11:20:54
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

Ajoutez l'attribut readonly dans jquery.

4
répondu Chenthil 2016-08-17 09:05:12

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

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

        $(".project-date").keydown(false);
4
répondu Esen 2017-01-27 11:01:15

Pour datepicker de popup sur le gain focus:

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

Si vous ne voulez pas d'entrée utilisateur, ajoutez ceci au champ de saisie

<input type="text" name="date" readonly="readonly" />
3
répondu Eduardo Molteni 2008-09-30 16:20:02

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

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

  2. Option B: Changer le curseur de la souris onfocus. Réglez ti sur flou. cela peut être fait en configurant l'attribut onfocus="this.blur()" dans le champ de texte de votre sélecteur de date.

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

3
répondu user2182143 2016-08-18 07:14:30

Je viens de tomber sur ceci donc je partage ici. Ici est 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
répondu Matija 2017-03-07 10:12:27

Cette démo fait en quelque sorte cela en plaçant le calendrier sur le champ de texte afin que vous ne puissiez pas le taper. Vous pouvez également définir le champ de saisie en lecture seule dans le code HTML pour être sûr.

<input type="text" readonly="true" />
1
répondu Zach 2008-09-30 16:22:09

HTML

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

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
1
répondu kayz1 2015-02-20 09:00:46

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

0
répondu James Curran 2008-09-30 16:22:15
$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});
0
répondu LithiumD 2013-11-19 12:51:51

Voici votre réponse qui est une façon de résoudre.Vous ne souhaitez pas utiliser jquery lorsque vous limitez l'entrée de l'utilisateur dans le contrôle textbox.

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

<input type="text" id="my_txtbox" readonly="true"/>
0
répondu johnkhadka 2015-07-31 05:14:43

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

Travaillé comme un charme..

0
répondu user3661687 2016-07-16 09:08:32

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

entrez la description de l'image ici

0
répondu Ajjay Arora 2016-11-24 05:57:25

Je sais que cette question est déjà répondue, et la plupart ont suggéré d'utiliser readonly attribure.
Je veux juste partager mon scénario et répondre.

Après l'ajout d'readonly attribut de 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 définir les deux readonly et required au moment de la création HTML.

Donc je vais suggérer Ne pas utiliser readonly si vous voulez en faire required aussi.

Utilisez plutôt

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

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

Cela permet à la presse tab clé seulement.
Vous pouvez ajouter d'autreskeycodes que vous souhaitez contourner.

Je code ci-dessous depuis que j'ai ajouté les deux readonly et required - il encore soumet le formulaire.
Après avoir enlevé readonly cela 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
répondu Shantaram Tupe 2017-06-16 10:40:50

Remplacer L'ID du sélecteur de temps: IDofDatetimePicker à votre id.

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

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

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

0
répondu Mohan 2017-09-20 19:41:48

Ou vous pouvez, par exemple, utiliser un champ caché pour stocker la valeur...

        <asp:HiddenField ID="hfDay" runat="server" />

Et dans le $("#my_txtbox").datepicker ({options:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }
-1
répondu Steinwolfe 2012-10-17 21:50:47

Si vous voulez que l'utilisateur sélectionne une date dans le datepicker mais que vous ne voulez pas que l'utilisateur tape dans la zone de texte, utilisez le code suivant:

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

});

-1
répondu Shabbir.A.Hussain 2013-02-26 11:53:42