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

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

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

cela ne permet pas à l'utilisateur de saisir du texte aléatoire dans la zone de texte. Je veux que le Datepicker apparaisse lorsque la zone de texte obtient le focus ou que l'utilisateur clique dessus, mais je veux que la zone de texte ignore toute entrée 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

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

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

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 laissera pas le type d'utilisateur de nouveaux personnages, mais va leur permettre de caractères de suppression:

$("#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" />

essayer

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

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

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

fait que 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 'keypress'

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

ajoutez l'attribut readonly dans la jquery.

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

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

2. Option B: changer le curseur sur la mise au point. 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/>

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

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

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

Pour afficher le sélecteur de date pour obtenir le focus:

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

Si vous ne voulez pas de saisie utilisateur, ajoutez-la au champ de saisie

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

Je viens de tomber sur ceci 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

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

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

HTML

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

CSS

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

Je sais que ce fil est ancien, mais pour d'autres qui rencontrent le même problème, qui implémentent la solution @ Brad8118 (ce que je préfère, car si vous choisissez de rendre l'entrée en lecture seule, l'utilisateur ne pourra pas supprimer la valeur de date insérée dans le sélecteur de date. s'il choisit) et doit également empêcher l'utilisateur de coller une valeur (comme @ErikPhilips a suggéré d'être nécessaire), 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 le plugin fengyuanchen / datepicker à la place):

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

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

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

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

Voici votre réponse qui est un moyen de résoudre. Vous ne voulez pas utiliser jquery lorsque vous avez restreint l'entrée 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"/>

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

a fonctionné comme un charme ..

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

Je sais que cette question est déjà répondue, et la plupart suggèrent d'utiliser l' readonlyattribution.
Je veux juste partager mon scénario et répondre.

Après avoir ajouté un readonlyattribut à mon élément HTML , j'ai rencontré un problème selon lequel je ne suis pas en mesure de rendre cet attribut aussi requireddynamique.
Même essayé de définir à la fois readonlyetrequired au moment de la création HTML.

Je vais donc suggérer de ne pas utiliser readonlysi vous souhaitez le définir requiredégalement.

Utilisez plutôt

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

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

Cela permet d'appuyer sur la tabtouche uniquement.
Vous pouvez ajouter d'autres codes clés que vous souhaitez contourner.

Je code ci-dessous depuis que j'ai ajouté les deux readonlyet requiredil soumet toujours le formulaire.
Après le retrait, readonlycela 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>

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

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

$ ("# my_txtbox"). keypress (fonction (événement) {event.preventDefault ();});

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

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

<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 il fonctionne bien sur les configurations Android avec lesquelles je l'ai utilisé.

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

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

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

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

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

});