Kullanıcı girişine izin vermeyen metin girişli jQuery Datepicker

Metin kutusu girişi ile jQuery Datepicker nasıl kullanılır:

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

kullanıcının metin kutusuna rastgele metin girmesine izin vermez. Metin kutusu odak kazandığında veya kullanıcı üzerine tıkladığında Datepicker'ın açılmasını istiyorum, ancak metin kutusunun klavyeyi (kopyala yapıştır veya diğer) kullanarak herhangi bir kullanıcı girişini yoksaymasını istiyorum. Metin kutusunu yalnızca Datepicker takviminden doldurmak istiyorum.

Mümkün mü?

jQuery 1.2.6
Datepicker 1.5.2

Metin girişinde salt okunur özniteliği kullanabilmeniz gerekir ve jQuery yine de içeriğini düzenleyebilir.

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

Deneyimlerime dayanarak, Adhip Gupta'nın önerdiği çözümü tavsiye ederim:

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

Aşağıdaki kod, kullanıcının yeni karakterler yazmasına izin vermez , ancak karakterleri silmesine izin verir:

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

Ayrıca, bu, formu JavaScript'i devre dışı bırakanlar için işe yaramaz hale getirir:

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

Deneyin

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

Tarih seçiciyi birden çok yerde yeniden kullanıyorsanız, metin kutusunu JavaScript aracılığıyla da aşağıdaki gibi bir şey kullanarak değiştirmek uygun olacaktır:

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

tarih toplayıcınızı başlattığınız yerden hemen sonra / öncesinde.

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

geri dönüşten sonra metin kutusunun değerini kaybetmesine neden olur.

Brad8118'in mükemmel çalışan önerisini kullanmayı tercih etmelisiniz.

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

EDIT: IE için çalışması için 'keypress' yerine 'keydown' kullanın

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

jquery'ye salt okunur özniteliğini ekleyin.

Bunu yapmak için iki seçeneğiniz var. (Bildiğim kadarıyla)

1. Seçenek A: Metin alanınızı salt okunur yapın. Aşağıdaki gibi yapılabilir.

2. Seçenek B: İmleç odaklamasını değiştirin. Ti'yi bulanıklaştırmaya ayarlayın. bu özelliği onfocus="this.blur()"tarih seçici metin alanınıza ayarlayarak yapılabilir .

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

Tarih seçiciyi başlattıktan sonra:

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

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

Kazanç odağında pop-up penceresini açmak için:

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

Kullanıcı girişi istemiyorsanız, bunu giriş alanına ekleyin

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

Daha yeni geldim, bu yüzden burada paylaşıyorum. İşte seçenek

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

İşte kod.

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

İşte keman:

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

Bootstrap-datetimepicker.js sürümüm 4.17.45

Bu demo , takvimi metin alanının üzerine koyarak bunu yazamazsınız. Emin olmak için giriş alanını yalnızca HTML'de okunacak şekilde de ayarlayabilirsiniz.

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

HTML

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

CSS

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

Bu iş parçacığı eski biliyorum, ama aynı sorunla karşılaşan diğerleri için, bu @ @ Brad8118 çözümü uygulamak (ki ben tercih, çünkü giriş salt okunur yapmak seçerseniz o zaman kullanıcı datepicker eklenen tarih değerini silmek mümkün olmayacaktır seçerse) ve ayrıca kullanıcının bir değer yapıştırmasını engellemesi gerekiyorsa (@ErikPhilips gerekli olduğu gibi), benim için çalışan bu eklemeye izin verdim: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });buradan https://www.dotnettricks.com/learn/ jquery / devre dışı bırak-kopyala-ve-yapıştır-metin kutusunda-kullanarak-jquery-javascript ve benim tarafımdan kullanılan tüm özel komut dosyası (bunun yerine fengyuanchen / datepicker eklentisini kullanarak):

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

Yerine ekleyerek salt okunur de kullanabilirsiniz = "return false;" onkeypress

JQuery Takvim eklentisinin en azından benim için genel olarak sadece tarihleri ​​seçmek için daha iyi çalıştığını buldum.

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

İşte çözümün cevabı: Metin kutusu kontrolündeki kullanıcı girişini kısıtladığınızda jquery kullanmak istemezsiniz.

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

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

$ ("# my_txtbox"). prop ('salt okunur', doğru)

cazibe gibi çalıştı ..

Metin kutusunu kullanmak yerine düğmeyi de kullanabilirsiniz. Kullanıcıların el ile tarih yazmasını istemediğim en iyi şekilde çalışır.

Bu sorunun zaten yanıtlandığını ve en çok readonlyatıfta bulunmayı önerdiğini biliyorum.
Sadece senaryomu ve cevabımı paylaşmak istiyorum.

HTML Öğemereadonly öznitelik ekledikten sonra , bu özniteliği dinamik olarak yapamadığım bir sorunla karşılaştım . Her ikisi de ve HTML oluşturma zamanında ayarlamayı bile denedi .required
readonlyrequired

Bu yüzden de readonlyayarlamak istiyorsanız kullanmamanızı öneririm required.

Bunun yerine kullanın

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

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

Bu tabsadece tuşa basmaya izin verir . Atlamak istediğiniz
başka anahtar kodları ekleyebilirsiniz .

Her ikisini de ekledim readonlyve requiredhala formu gönderir beri kodun altında .
Çıkardıktan sonra readonlydüzgün çalışıyor.

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>

time picker: IDofDatetimePicker kimliğini kimliğinizle değiştirin.

Bu, kullanıcının başka klavye girişleri girmesini engelleyecektir, ancak yine de kullanıcı zaman açılır penceresine erişebilecektir.

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

Bu kaynağı deneyin: https://github.com/jonthornton/jquery-timepicker/issues/109

Bu sorunun birçok eski cevabı var ve salt okunur kabul edilen bir çözüm gibi görünüyor. Modern tarayıcılarda daha iyi yaklaşımın inputmode="none"HTML giriş etiketinde kullanmak olduğuna inanıyorum :

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

veya komut dosyasında yapmayı tercih ediyorsanız:

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

Kapsamlı bir şekilde test etmedim, ancak kullandığım Android kurulumlarında iyi çalışıyor.

Veya değeri saklamak için gizli bir alan kullanabilirsiniz ...

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

ve $ ("# my_txtbox"). tarih seçicide ({seçenekler:

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

Kullanıcının tarih seçiciden bir tarih seçmesini ancak kullanıcının metin kutusunun içine yazmasını istemiyorsanız, aşağıdaki kodu kullanın:

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

});