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

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" />

Essayez

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

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.

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

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

Ajoutez l'attribut readonly dans jquery.

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

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

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

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" />

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

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

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" />

HTML

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

CSS

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

J'ai trouvé que le plugin jQuery Calendar, pour moi au moins, en général fonctionne mieux pour sélectionner des 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 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"/>

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

Travaillé comme un charme..

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.

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>

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

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

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);

});