jQuery Datepicker dengan input teks yang tidak memungkinkan input pengguna


140

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

Jawaban:


269

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

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

30
Untuk Orang yang menonaktifkan Javascript, saya akan meninggalkan kolom input sendirian di HTML dan memiliki sedikit jQuery menempatkan atribut readonly pada halaman memuat $ (dokumen) .ready (function () {$ ("# my_txtbox"). Attr 'readOnly', 'true'); }); Dengan begitu pengguna dengan JS dimatikan masih dapat memilih tanggal
SimonGates

6
ini hebat .. namun penataan standar yang ditambahkan Chrome (dan mungkin peramban lainnya) ke atribut hanya baca benar-benar tidak menyenangkan, jadi pastikan Anda menimpanya
Damon

1
@FooBar Anda mengusulkan solusi praktis; hanya sebuah catatan bahwa cara yang lebih disukai saat ini (karena beberapa waktu telah berlalu sejak komentar Anda) untuk mengatur atribut readonly adalah melalui metode prop ():$("#my_txtbox").prop('readonly', true)
Werner

2
Sesuai spesifikasi HTML WC3, satu-satunya <input readonly> atau <input readonly = "readonly"> tanpa true / false w3.org/TR/html5/forms.html#the-readonly-attribute
Ankit Sharma

5
Saya akan menggunakan kursor untuk membuatnya terlihat dapat diklik<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Benjamin Lucidarme

61

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

3
OP harus mempertimbangkan menandai ini sebagai jawaban karena skenario menonaktifkan JavaScript.
CeejeeB

7
di alam semesta paralel apa orang menggunakan situs web biasa dengan javascript dinonaktifkan?
d.raev

Bagaimana JAVASCRIPT ini akan membantu jika JavaScript dinonaktifkan?
PW Kad

1
@PWKad dengan menambahkan readonlyatribut ke bidang melalui JS, Anda memastikan bahwa jika mereka menonaktifkan JavaScript (dan karena itu tidak akan dapat menggunakan datepicker), mereka masih dapat menggunakan formulir melalui entri manual standar.
Jonathan Bender

2
Pada saat penulisan, ini adalah cara yang lebih disukai untuk mengatur atribut readonly menggunakan jQuery: $("#my_txtbox").prop('readonly', true);
Werner

13

mencoba

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

Saya telah menggunakan ini dengan asp.net dengan sukses karena itu tidak bermain bagus ketika mengatur atribut <asp: textbox> readonly menjadi "true"
Russ Cam

2
Ini tidak mencegah seseorang menempelkan nilai ke dalam kotak teks untuk referensi di masa mendatang.
Erik Philips

10

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.


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


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

tambahkan atribut readonly di jquery.


4

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


2
hack blur itu agak mengagumkan. Bidang tidak harus hanya baca yang membingungkan sebagian pengguna ketika mereka mendapatkan STOP merah raksasa di bidang di Chrome ... itu mencegah pemotongan dan tempel, penghapusan, pengetikan, dll ... dan jepery datepicker masih berfungsi dengan baik ...
David C

4

Setelah menginisialisasi pemilih tanggal:

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

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

Atau dalam satu langkah$(".project-date").datepicker().keydown(false);
Christian Lescuyer

3

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

3

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


1

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

1

HTML

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

CSS

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

1

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;


0

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


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

0

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


0

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

masukkan deskripsi gambar di sini


0

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>



0

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.


Saya mengkode proyek ini sebagian besar untuk Android seluler. Ymmv dengan platform lain.
Peter Bowers

-1

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

-1

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

});

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.