jQuery Datepicker mit Texteingabe, die keine Benutzereingaben erlauben

Question

Wie verwende ich den jQuery Datepicker mit einer Texteingabe:

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

, die nicht den Benutzer zur Eingabe von beliebigen Text in das Textfeld zulässt. Ich möchte, dass die Datumsauswahl Pop-up, wenn die Textbox den Fokus erhält oder der Benutzer klickt, aber ich möchte, dass die Textbox jede Benutzereingabe über die Tastatur (Copy & Paste oder andere) zu ignorieren. Ich mag die Textbox ausschließlich aus dem Datepicker Kalender füllen.

Ist das möglich?

jQuery 1.2.6
Picker 1.5.2

Answer 1

Es sollte möglich sein, die zu verwenden, nur lesbar Attribut auf der Texteingabe, und jQuery noch in der Lage sein, den Inhalt zu bearbeiten.

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

Answer 2

Aufgrund meiner Erfahrung würde ich die Lösung von Adhip Gupta vorgeschlagen empfehlen:

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

Der folgende Code wird der Benutzertyp neue Zeichen nicht zulassen, aber erlauben ihnen Zeichen zu löschen:

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

Darüber hinaus wird dies in Form nutzlos für diejenigen machen, die haben JavaScript deaktiviert:

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

Answer 3

Versuch

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

Answer 4

Wenn Sie die Datumsauswahl an mehreren Stellen wiederverwenden, dann wäre es geeignet sein, um die Textbox auch per JavaScript zu ändern, indem Sie mit so etwas wie:

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

direkt nach / vor dem Ort, an dem Sie Ihre picker initialisieren.

Answer 5

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

bewirkt, dass die Textbox seinen Wert nach dem Postback zu verlieren.

Sie sollten vielmehr Brad8118 Vorschlag benutzen, die perfekt funktionieren.

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

EDIT: zum Laufen bringen es für IE verwenden ‚keyDown‘ anstelle von ‚keypress‘

Answer 6

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

fügen Sie das Read-only-Attribut im jquery.

Answer 7

Nach der Datumsauswahl Initialisierung:

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

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

Answer 8

Um picker auf Verstärkung Fokus Popup:

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

Wenn Sie nicht über eine Benutzereingabe möchten, fügen Sie diese in das Eingabefeld

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

Answer 9

Sie haben zwei Möglichkeiten, dies zu tun bekommen. (Soweit ich weiß)

1. Option A: Machen Sie Ihr Textfeld nur lesen. Es kann wie folgt durchgeführt werden.

2. Option B: Ändern Sie den Curser onfocus. Stellen ti zu verwischen. es kann durch Einstellung des Attributs onfocus="this.blur()" zu Ihrem Datumsauswahl Textfeld erfolgen.

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

Answer 10

Ich kam gerade über diese so hier bin ich zu teilen. Hier ist die Option

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

Hier ist der 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
});

Hier ist die Geige:

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

Meine Version von Bootstrap-datetimepicker.js ist 4.17.45

Answer 11

Das Demo Art geschieht durch den Kalender über das Textfeld setzen, so dass Sie nicht in ihm eingeben. Sie können auch das Eingabefeld setzen nur im HTML zu lesen um sicher zu sein.

<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

Ich weiß, dieser Thread ist alt, aber für andere, die das gleiche Problem auftreten, dass implementieren @ Brad8118 Lösung (was ich lieber, denn wenn Sie die Eingabe machen wählen, um nur lesbar dann wird der Benutzer das Datum Wert nicht in der Lage sein, löschen eingeführt von picker, wenn er wählt) und benötigen auch einen Wert um den Benutzer zu verhindern, dass das Einfügen (wie @ErikPhilips benötigt werden vorgeschlagen), lasse ich diesen Zusatz hier, die für mich gearbeitet: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); von hier https : //www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript und die gesamte spezifische Skript von mir verwendet (mit fengyuanchen / Datepicker-Plugin statt):

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

Ich habe festgestellt, dass die jQuery-Kalender-Plugin, für mich zumindest im Allgemeinen funktioniert besser für Termine auswählen.

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

Hier ist Ihre Antwort, die Art und Weise zu solve.You ist nicht will, Jquery verwenden, wenn Sie die Benutzereingabe in Textbox-Steuerelement beschränkt.

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

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

Answer 17

$ ( "# my_txtbox"). Prop ( 'Read-only', true)

arbeitete wie ein Charme ..

Answer 18

Statt Textbox verwenden Sie Taste auch verwenden können. Funktioniert am besten für mich, wo ich Benutzer nicht will Datum manuell schreiben.

Answer 19

Ich weiß, diese Frage schon beantwortet, und die meisten vorgeschlagen zu verwenden readonly attribure.
Ich will nur mein Szenario und Antwort teilen.

Nach der Zugabe von readonly Attribute zu meinem HTML-Elemente , ich konfrontierte Problem, dass ich nicht in der Lage bin zu machen dieses Attribut als required dynamisch.
Auch versucht, als beide Einstellung readonly und required bei HTML-Erstellungszeit.

So werde ich vorschlagen nicht verwenden readonly , wenn Sie es als setzen wollen required auch.

Stattdessen verwenden

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

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

Diese erlauben drücken tab Schlüssel nur.
Sie können hinzufügen mehr keycodes , die Sie wollen umgehen.

ich unter Code da ich sowohl readonly hinzugefügt und required es trägt noch das Formular aus.
Nach dem Entfernen von readonly es funktioniert einwandfrei.

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

die ID der Zeitauswahl ersetzen: IDofDatetimePicker auf Ihre ID.

Damit wird den Benutzer verhindert, dass weitere Tastatureingaben eingeben, aber immer noch, wird der Benutzer in der Lage, die Zeit Popup zugreifen zu können.

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

Try this Quelle: https://github.com/jonthornton/jquery-timepicker/issues/109

Answer 21

Diese Frage hat viele ältere Antworten und scheint nur lesbar die allgemein akzeptierte Lösung. Ich glaube, der bessere Ansatz in modernen Browsern ist die inputmode="none" im HTML-Input-Tag zu verwenden:

<input type="text" ... inputmode="none" />

oder, wenn Sie bevorzugen es in Skript zu tun:

$(selector).attr('inputmode', 'none');

Ich habe es nicht ausgiebig getestet, aber es funktioniert gut auf den Android-Setups ich verwendet habe es mit.

Answer 22

Oder Sie könnten zum Beispiel verwenden, um ein verstecktes Feld, um den Wert zu speichern ...

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

und in dem $ ( "# my_txtbox") picker ({Optionen:.

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

Answer 23

Wenn Sie die Benutzer wollen ein Datum aus dem Datepicker wählen, aber Sie nicht den Benutzer möchten geben Sie innerhalb der Textbox dann den folgenden Code verwenden:

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

});