it-swarm-id.com

Hanya Baca Tanggal DatePicker

Ketika saya membuat datepicker saya hanya-baca, saya melihat bahwa pengguna tidak bisa mengetikkan apa pun ke dalam kotak teks. 

$("#datepicker").attr('readonly', 'readonly');

Namun, mereka masih dapat mengubah nilai menggunakan kalender. Bagaimana saya bisa menyembunyikan kalender sehingga pengguna tidak dapat mengubah nilai tanggal?

Saya tidak ingin menonaktifkan datepicker karena saya perlu nilai diposting ke server pada saat mengirimkan.

("#datepicker").datepicker('disable');

33
Bob

Anda dapat mengatur rentang yang diizinkan untuk beberapa rentang yang tidak valid sehingga pengguna tidak dapat memilih tanggal apa pun:

$("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');     
26
Eduardo Molteni

Saya mengatur event handler beforeShow berikut (dalam parameter opsi) untuk mencapai fungsi ini.

beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
69
Code Commander

Solusi terakhir saya:

Ketika aplikasi saya memuat saya menginisialisasi datepicker seperti:

$('.selector').datepicker({ dateFormat: "mm/dd/yy" }); 

Saya kemudian memiliki tombol sakelar global yang mengaktifkan/menonaktifkan datepicker. Untuk menonaktifkan saya lakukan hal berikut:

$('.selector').datepicker("option", "minDate", -1);
$('.selector').datepicker("option", "maxDate", -2); 

Untuk mengaktifkan saya melakukan hal berikut:

$('.selector').datepicker("option", "minDate", null);
$('.selector').datepicker("option", "maxDate", null); 

Terimakasih semuanya!

5
Bob

Jika Anda mencoba menonaktifkan bidang (tanpa benar-benar menonaktifkannya), coba atur acara onfocus ke this.blur();. Dengan cara ini, setiap kali bidang mendapat fokus, secara otomatis kehilangan itu.

4
Crontab

Semua solusi yang terdaftar memberikan pengalaman pengguna yang biasa-biasa saja atau menyebabkan masalah jika Anda ingin mengaktifkan kembali datepicker dengan pengaturannya. Saya menggunakan metode yang mirip dengan membuat read-only pilih, yaitu untuk menonaktifkannya tetapi menambahkan bidang tersembunyi dengan nama yang sama. Periksa:

Pemakaian: 

$("#datepicker").readonlyDatepicker(true); //makes the datepicker readonly
$("#datepicker").readonlyDatepicker(false); //makes the datepicker editable again

fungsi jQuery: 

$.fn.readonlyDatepicker = function (makeReadonly) {
    $(this).each(function(){

        //find corresponding hidden field
        var name = $(this).attr('name');
        var $hidden = $('input[name="' + name + '"][type="hidden"]');

        //if it doesn't exist, create it
        if ($hidden.length === 0){
            $hidden = $('<input type="hidden" name="' + name + '"/>');
            $hidden.insertAfter($(this));
        }

        if (makeReadonly){
            $hidden.val($(this).val());
            $(this).unbind('change.readonly');
            $(this).attr('disabled', true);
        }
        else{
            $(this).bind('change.readonly', function(){
                $hidden.val($(this).val());
            });
            $(this).attr('disabled', false);
        }
    });
};
4
Josh Noe

Maaf, tetapi solusi Eduardos tidak berfungsi untuk saya . Pada akhirnya, saya menyadari bahwa datepicker yang dinonaktifkan hanyalah kotak baca-saja . Jadi, Anda harus membuatnya hanya membaca dan menghancurkan datepicker . Field akan dikirim ke server setelah dikirimkan.

Berikut ini adalah kode yang digeneralisasi yang mengambil banyak kotak teks dan membuatnya hanya membaca . Ini juga akan menghapus datepickers.

fields.attr("readonly", "readonly");
fields.each(function(idx, fld) {
    if($(fld).hasClass('hasDatepicker'))
    {
        $(fld).datepicker("destroy");
    }
});
2

onkeypress => preventdefault ...

1
Royi Namir
      beforeShow: function(el) {
            if ( el.getAttribute("readonly") !== null ) {
                if ( (el.value == null) || (el.value == '') ) {
                    $(el).datepicker( "option", "minDate", +1 );
                    $(el).datepicker( "option", "maxDate", -1 );
                } else {
                    $(el).datepicker( "option", "minDate", el.value );
                    $(el).datepicker( "option", "maxDate", el.value );
                }
            }
        },
0
mauro

Saya datang dengan solusi lain yang berbeda dari yang telah diusulkan. Ketika pemilih tanggal digunakan, itu menciptakan div mirip dengan pop-up yang diposisikan ketika bidang input diklik. Untuk menghapusnya, saya hanya mengatur properti visibilitas CSS sehingga tidak muncul.

if ($('.yourDatepickerSelector').prop('readonly')) {
    $('#ui-datepicker-div').css({ 'visibility': 'hidden' })
} else { $('#ui-datepicker-div').css({ 'visibility': 'visible' }) }

Ini juga tampaknya memposting dengan benar ke server, dan seharusnya tidak mempengaruhi pengaturan yang terkait dengannya.

0
BBQ Singular
Readonly datepicker with example (jquery) - 
In following example you can not open calendar popup.
Check following code see normal and readonly datepicker.

Html Code- 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
                var currentDate=new Date();
                $( "#datepicker-12" ).datepicker({
                  setDate:currentDate,
                  beforeShow: function(i) { 
                      if ($(i).attr('readonly')) { return false; } 
                   }
                });
                $( "#datepicker-12" ).datepicker("setDate", currentDate);
                $("#datepicker-13").datepicker();
                $( "#datepicker-13" ).datepicker("setDate", currentDate);
        });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <p>Readonly DatePicker: <input type = "text" id = "datepicker-12" readonly="readonly"></p>
      <p>Normal DatePicker: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

0
Nandlal Ushir
<sj:datepicker id="datepickerid" name="datepickername" displayFormat="%{formatDateJsp}" readonly="true"/>

Bekerja untukku.

0
Bhimbim