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

Question

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

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

qui ne permet pas à l'utilisateur de saisir du texte au hasard dans la zone de texte. Je souhaite que le Datepicker apparaisse lorsque la zone de texte devient active ou que l'utilisateur clique dessus, mais je souhaite que la zone de texte ignore toute saisie de l'utilisateur à l'aide du clavier (copie & Et coller, ou toute autre). Je souhaite remplir la zone de texte exclusivement à partir du calendrier Datepicker.

Est-ce possible?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

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

Answer 2

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 permettra pas à l'utilisateur de saisir de nouveaux caractères, mais lui lui permettra de supprimer des caractères:

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

De plus, cela rendra le formulaire inutile pour ceux dont le JavaScript est désactivé:

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

Answer 3

essayer

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

Answer 4

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

Answer 5

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

entraîne la perte de valeur de la zone de texte après publication.

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

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

EDIT: pour que cela fonctionne pour IE, utilisez 'keydown' au lieu de 'presser'

Answer 6

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

ajoutez l'attribut readonly dans le jquery.

Answer 7

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

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

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

Answer 8

To datepicker to popup sur le gain gain:

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

Si vous ne souhaitez pas que l'utilisateur entre l'utilisateur, ajoutez ceci dans le champ d'entrée

.

<input type="text" name="date" readonly="readonly" />

Answer 9

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

1. Option A: Faites en sorte que votre champ de texte soit en lecture seule. Cela peut être fait comme suit.

2. Option B: modifiez le curseur onfocus. Réglez ti sur flou. Pour ce faire, configurez 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/>

Answer 10

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

Answer 11

Ce démo est en quelque sorte ce qu'il fait par mettre le calendrier sur le champ de texte afin que vous ne puissiez pas y 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" />

Answer 12

HTML

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

CSS

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

Answer 13

Je sais que ce fil est ancien, mais pour les autres personnes rencontrant le même problème, la solution @ Brad8118 est implémentée (ce que je préfère, car si vous choisissez d'effectuer la saisie en lecture seule, l'utilisateur ne pourra pas supprimer la valeur de la date. inséré à partir de datepicker s'il le souhaite) et qu'il doit également empêcher l'utilisateur de coller une valeur (comme suggéré par @ErikPhilips), je laisse cet ajout 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-copy-and-paste-in-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;

Answer 14

J'ai constaté que le plugin jQuery Calendar, du moins pour moi, fonctionne généralement mieux pour la sélection de dates.

Answer 15

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

Answer 16

Voici votre réponse, qui est une solution. Vous ne voulez pas utiliser jquery lorsque vous restreignez la saisie de l'utilisateur dans le contrôle de la zone de texte.

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

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

Answer 17

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

a travaillé comme un charme ..

Answer 18

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.

Answer 19

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 required à mon élément HTML , j'ai été confronté à un problème qui empêchait cet attribut de devenir tab de manière dynamique.
Même essayé de définir <=> et <=> au moment de la création HTML.

Je vous suggère donc de ne pas utiliser <=> si vous souhaitez également le définir comme <=> .

Utilisez plutôt

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

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

Ceci permet d'appuyer sur la <=> touche uniquement.
Vous pouvez ajouter davantage de codes clés que vous souhaitez contourner.

Je code sous le code depuis que j'ai ajouté à la fois <=> et <=> il soumet toujours le formulaire.
Après avoir supprimé <=> , 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>

Answer 20

remplace l'ID du sélecteur de temps: IDofDatetimePicker à votre identifiant.

Ceci 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 "). keypress (function (event) {event.preventDefault ();});

Essayez ceci la source: https://github.com/jonthornton/jquery-timepicker/fr >

Answer 21

Cette question a beaucoup de réponses anciennes et semble être la solution généralement acceptée en lecture seule. Je pense 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 dans le 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é.

Answer 22

Vous pouvez également utiliser un champ masqué pour stocker la valeur, par exemple ...

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

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

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }

Answer 23

Si vous voulez que l'utilisateur sélectionne une date dans le sélecteur de date mais que vous ne vouliez pas qu'il 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);

});