Datepicker-Feld nur gelesen werden

Ich habe ein input-Feld nimmt Einsatz von datepicker:

<input id="datepicker-start_date" class="form-control text-center hasDatepicker" readonly="true" type="text">

und ich will machen es möglich, das Datum abgeholt werden, nur durch einen Klick (also kein input-Eingabe). Für diesen Zweck habe ich aktiviert die readonly Eigenschaft. Aber jetzt ist das Feld sieht aus, als ob es deaktiviert (Grau hinterlegt) und wenn ich den Mauszeiger darüber schweben, den Wahlschalter hand ist mit einem rot-gekreuzt wird (ein "no-go") symbol:

So, wie kann ich erreichen einen ähnlichen Effekt wie "nur-Lesen", aber nicht mit "Behinderte" hand-selector und etc.?

Update

Den JS code:

    var dateToday = new Date();
    var start_date = $("#datepicker-start_date");
    start_date.datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        yearRange: "-00:+01",
        minDate: dateToday,
        onSelect: function (selected) {
            $("#datepicker-arrival_date").datepicker("option", "minDate", selected)
        }
    });

    var arrival_date = $("#datepicker-arrival_date");
    arrival_date.datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        yearRange: "-00:+01"
    });

HTML:

<input id="datepicker-start_date" class="form-control text-center hasDatepicker" placeholder="When do you go?" readonly="readonly" data-parsley-required="true" name="start_date" type="text" value="2015-03-19">

<input id="datepicker-arrival_date" class="form-control text-center disabled hasDatepicker" placeholder="Arrive on...?" readonly="true" data-parsley-required="true" name="arrival_date" type="text" value="2015-03-20">

u kann versuchen, die $("#datepicker-start_date").attr( 'readOnly' , 'true' ); in Ihrem Dokument.bereit-Methode? oder Sie können auch versuchen, $("#datepicker-start_date").keypress(function(event) {event.preventDefault();});
Ich würde die Ratschläge, die Nutzung eines Bildes für den datepicker und dann machen Sie Ihren input readonly. Ich habe das ausprobiert und es funktioniert
die erste option bietet genau die gleiche Funktionalität wie das, was ich mit dem HTML-Attribut. Und die zweite option tut man nicht alles...
könnten Sie näher erläutern, bitte?
Sie können auch versuchen, $("#datepicker-start_date").datepicker({}).attr('readonly','readonly');
Das hat nichts zu tun mit Laravel, entfernen Sie bitte, dass tag
Ihre css-Regeln anwenden, die cursor und hintergrund Hinweise. Sie brauchen nur zu überschreiben, dass mit einer neuen css-Regel.

InformationsquelleAutor Milkncookiez | 2015-04-24

4

http://jsfiddle.net/8w8v9/154/

Dies scheint zu funktionieren für mich. Ich hatte zu entfernen die hasDatePicker Klasse, es zu schaffen. Auf der Suche, warum es bewirkt, dass die Ausgabe
```
<input id="datepicker-start_date" class="form-control text-center" type="text" readonly>
```
Geben Sie diese ein Schuss -
```
input[readonly] {
  cursor: pointer !important;
  background-color: white !important;
}
```
- stackoverflow.com/questions/1865492/.... Haben Sie fügen Sie eine hasDatePicker Klasse selbst oder wurde es Hinzugefügt von JQuery?
- Es wurde automatisch Hinzugefügt.
- Können Sie überprüfen, ob seine Arbeit jetzt für Sie?
- Nein, es ist nicht. 🙁 Und in jsfiddle funktioniert es sogar, wenn ich wieder die "hasDatePicker".
- Könnten Sie teilen Ihren code. Ich war nicht für mich arbeiten, mit dieser Klasse in der Eingabe
- Ich aktualisierte mein post mit dem code. 🙂 Es ist eigentlich 2 Felder (aber gleiche Funktionalität, so dass ist, warum ich gefragt wurde, nur etwa 1, Anfang).
- Ich bin mir wirklich nicht sicher, wie, um es zu reproduzieren, seine arbeiten perfekt in der Geige.
- Vielleicht haben Sie missverstanden, was ich will. Ich weiß, es funktioniert wie readonly. Aber optisch hat es eine hand-Selektor mit einem disabled symbol (auf die Maus das Feld), und das Feld ist Grau. Das ist der Effekt, dass die "readonly" HTML-Attribut gibt. Ich will nicht diese visuellen Effekte.
- input[readonly="readonly"] { background-color:white; }
- Dies wird verhindern, dass der graue hintergrund. Für die hand-Selektor, bin ich nicht immer, dass in der Geige
- Ich denke, die css-Regel ist der Weg hier zu gehen. Allerdings würde ich eine zusätzliche Klasse, die Wähler machen dies mehr eingeschränkt, so dass es nicht Klamotten alle readonly-Eingänge, die nicht im Zusammenhang mit datepickers.
InformationsquelleAutor Pratik

Versuchen Sie es mit $(this).blur() auf klicken Sie auf/keyup-Ereignisse:

jsFiddle Demo

HTML:

Date: <input id="datepicker" type="text">

js/jQuery:

$( "#datepicker" ).datepicker();
$( "#datepicker" ).click(function(){
    $(this).blur();
});
$( "#datepicker" ).keyup(function(){
    //To further secure field, uncomment next line
    //$(this).val( $(this).val().slice(0,-1) );
    $(this).blur();
});

Nur kein. Diese völlig deaktiviert die Tastatur-navigation für das datepicker-element.

InformationsquelleAutor cssyphus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.