jQuery Datepicker dengan input teks yang tidak memungkinkan input pengguna

Bagaimana cara menggunakan jQuery Datepicker dengan input kotak teks:

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

itu tidak memungkinkan pengguna untuk memasukkan teks acak di kotak teks. Saya ingin Datepicker muncul ketika kotak teks mendapatkan fokus atau pengguna mengkliknya, tapi saya ingin kotak teks mengabaikan input pengguna apa pun menggunakan keyboard (salin & tempel, atau lainnya). Saya ingin mengisi kotak teks secara eksklusif dari kalender Datepicker.

Apakah ini mungkin?

jQuery 1.2.6
Datepicker 1.5.2

Anda harus dapat menggunakan atribut readonly pada input teks, dan jQuery masih dapat mengedit kontennya.

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

Berdasarkan pengalaman saya, saya akan merekomendasikan solusi yang disarankan oleh Adhip Gupta:

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

Kode berikut tidak akan membiarkan pengguna mengetik karakter baru, tetapi akan memungkinkan mereka untuk menghapus karakter:

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

Selain itu, ini akan membuat formulir tidak berguna bagi mereka yang menonaktifkan JavaScript:

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

mencoba

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

Jika Anda menggunakan kembali pemilih tanggal di banyak tempat maka akan lebih mudah untuk memodifikasi kotak teks juga melalui JavaScript dengan menggunakan sesuatu seperti:

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

tepat setelah / sebelum tempat di mana Anda menginisialisasi datepicker Anda.

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

menyebabkan kotak teks kehilangan nilainya setelah postback.

Anda sebaiknya menggunakan saran Brad8118 yang bekerja dengan sempurna.

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

EDIT: untuk membuatnya berfungsi untuk IE gunakan 'keydown' bukan 'penekanan tombol'

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

tambahkan atribut readonly di jquery.

Anda memiliki dua opsi untuk menyelesaikan ini. (Sejauh yang aku tahu)

1. Opsi A: Buat bidang teks Anda hanya baca. Itu bisa dilakukan sebagai berikut.

2. Opsi B: Ubah fokus curser. Atur agar tidak buram. itu dapat dilakukan dengan mengatur atribut onfocus="this.blur()"ke bidang teks pemilih tanggal Anda.

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

Setelah menginisialisasi pemilih tanggal:

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

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

Untuk datepicker memunculkan fokus:

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

Jika Anda tidak ingin input pengguna, tambahkan ini ke kolom input

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

Saya baru saja menemukan ini jadi saya berbagi di sini. Ini pilihannya

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

Ini kodenya.

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

Ini biola:

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

Versi bootstrap-datetimepicker.js saya adalah 4.17.45

Jenis demo ini melakukannya dengan meletakkan kalender di atas bidang teks sehingga Anda tidak bisa mengetiknya. Anda juga dapat mengatur bidang input untuk hanya membaca dalam HTML untuk memastikan.

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

HTML

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

CSS

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

Saya tahu utas ini sudah lama, tetapi bagi orang lain yang mengalami masalah yang sama, yang mengimplementasikan solusi @ Brad8118 (yang saya suka, karena jika Anda memilih untuk membuat input hanya dibaca maka pengguna tidak akan dapat menghapus nilai tanggal yang dimasukkan dari datepicker jika ia memilih) dan juga perlu mencegah pengguna menempelkan nilai (seperti yang disarankan oleh @ErikPhilips), saya membiarkan penambahan ini di sini, yang berfungsi untuk saya: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });dari sini https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-using-jquery-javascript dan seluruh skrip khusus yang digunakan oleh saya (sebagai gantinya menggunakan 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;

Alih-alih menambahkan readonly Anda juga dapat menggunakan onkeypress = "return false;"

Saya telah menemukan bahwa plugin Kalender jQuery, bagi saya setidaknya, secara umum hanya berfungsi lebih baik untuk memilih tanggal.

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

Inilah jawaban Anda yang merupakan cara untuk menyelesaikannya. Anda tidak ingin menggunakan jquery ketika Anda membatasi input pengguna dalam kontrol kotak teks.

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

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

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

bekerja seperti pesona ..

Alih-alih menggunakan kotak teks Anda dapat menggunakan tombol juga. Berfungsi terbaik untuk saya, di mana saya tidak ingin pengguna menulis tanggal secara manual.

Saya tahu pertanyaan ini sudah dijawab, dan sebagian besar menyarankan untuk menggunakan readonlyattribure.
Saya hanya ingin membagikan skenario dan jawaban saya.

Setelah menambahkan readonlyatribut ke Elemen HTML saya , saya menghadapi masalah bahwa saya tidak dapat menjadikan atribut inirequired secara dinamis.
Bahkan mencoba pengaturan keduanya readonlydanrequired pada waktu pembuatan HTML.

Jadi saya sarankan jangan gunakan readonlyjika Anda ingin mengaturnya requiredjuga.

Sebaliknya gunakan

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

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

Ini memungkinkan untuk menekan tabtombol saja.
Anda dapat menambahkan lebih banyak kode kunci yang ingin Anda bypass.

Saya di bawah kode karena saya telah menambahkan keduanya readonlydan requiredmasih mengirimkan formulir.
Setelah menghapusnya readonlyberfungsi dengan baik.

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>

ganti ID pemilih waktu: IDofDatetimePicker ke id Anda.

Ini akan mencegah pengguna memasukkan input keyboard lebih lanjut tetapi tetap saja, pengguna akan dapat mengakses popup waktu.

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

Coba sumber ini: https://github.com/jonthornton/jquery-timepicker/issues/109

Pertanyaan ini memiliki banyak jawaban yang lebih lama dan tampaknya hanya solusi yang diterima secara umum. Saya percaya pendekatan yang lebih baik di browser modern adalah dengan menggunakan inputmode="none"tag input HTML:

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

atau, jika Anda lebih suka melakukannya dalam skrip:

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

Saya belum mengujinya secara ekstensif, tetapi bekerja dengan baik pada pengaturan Android yang telah saya gunakan.

Atau Anda bisa, misalnya, menggunakan bidang tersembunyi untuk menyimpan nilai ...

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

dan di datepicker $ ("# my_txtbox"). ({options:

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

Jika Anda ingin pengguna memilih tanggal dari datepicker tetapi Anda tidak ingin pengguna mengetik di dalam kotak teks kemudian gunakan kode berikut:

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

});