jQuery Datepicker مع إدخال نص لا يسمح بإدخال المستخدم

Question

كيف يمكنني استخدام jQuery Datepicker مع إدخال مربع نص:

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

لا يسمح للمستخدم بإدخال نص عشوائي في مربع النص.أريد أن يظهر منتقي البيانات عندما يكتسب مربع النص التركيز أو ينقر المستخدم عليه، ولكن أريد أن يتجاهل مربع النص أي إدخال للمستخدم باستخدام لوحة المفاتيح (النسخ واللصق، أو أي شيء آخر).أريد ملء مربع النص حصريًا من تقويم Datepicker.

هل هذا ممكن؟

مسج 1.2.6
منتقي التاريخ 1.5.2

Answer 1

يجب أن تكون قادرًا على استخدام يقرأ فقط على إدخال النص، وسيظل jQuery قادرًا على تحرير محتوياته.

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

Answer 2

بناءً على تجربتي، أوصي بالحل الذي اقترحه Adhip Gupta:

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

التعليمة البرمجية التالية لن تسمح للمستخدم بكتابة أحرف جديدة، ولكن سوف السماح لهم بحذف الأحرف:

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

بالإضافة إلى ذلك، سيؤدي هذا إلى جعل النموذج عديم الفائدة لأولئك الذين تم تعطيل JavaScript لديهم:

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

Answer 3

يحاول

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

Answer 4

إذا كنت تعيد استخدام منتقي التاريخ في أماكن متعددة، فسيكون من المناسب تعديل مربع النص أيضًا عبر JavaScript باستخدام شيء مثل:

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

مباشرة بعد/قبل المكان الذي قمت فيه بتهيئة منتقي التاريخ الخاص بك.

Answer 5

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

يتسبب في فقدان مربع النص لقيمته بعد إعادة النشر.

من الأفضل أن تستخدم اقتراح Brad8118 الذي يعمل بشكل مثالي.

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

يحرر:لتشغيله مع IE، استخدم "keydown" بدلاً من "keypress"

Answer 6

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

أضف السمة للقراءة فقط في jquery.

Answer 7

بعد تهيئة منتقي التاريخ:

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

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

Answer 8

إلى منتقي التاريخ ليظهر في نافذة منبثقة للحصول على التركيز:

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

إذا كنت لا تريد إدخال المستخدم، أضف هذا إلى حقل الإدخال

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

Answer 9

لديك خياران لإنجاز هذا.(بقدر ما أعرف)

1. الخيار أ: اجعل حقل النص الخاص بك للقراءة فقط.يمكن القيام به على النحو التالي.

2. الخيار ب: تغيير التركيز على اللعنة.اضبط ti على التمويه.يمكن القيام بذلك عن طريق إعداد السمة onfocus="this.blur()" إلى حقل نص منتقي التاريخ الخاص بك.

السابق: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Answer 10

لقد صادفت هذا للتو لذا أشاركه هنا.هنا هو الخيار

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

هنا هو الرمز.

لغة البرمجة

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

شبيبة

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

هنا الكمان:

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

الإصدار الخاص بي من bootstrap-datetimepicker.js هو 4.17.45

Answer 11

هذا تجريبي يتم ذلك نوعًا ما عن طريق وضع التقويم فوق حقل النص حتى لا تتمكن من كتابته.يمكنك أيضًا تعيين حقل الإدخال للقراءة فقط في HTML للتأكد.

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

Answer 12

لغة البرمجة

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

CSS

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

Answer 13

أعلم أن هذا الموضوع قديم، ولكن بالنسبة للآخرين الذين يواجهون نفس المشكلة، فإنهم ينفذون حل @Brad8118 (وهو ما أفضله، لأنه إذا اخترت جعل الإدخال للقراءة فقط فلن يتمكن المستخدم من حذف قيمة التاريخ المدرجة من منتقي التاريخ إذا اختار) ويحتاج أيضًا إلى منع المستخدم من لصق قيمة (كما اقترحErikPhilips أن تكون هناك حاجة إليها)، فقد تركت هذه الإضافة هنا، والتي نجحت معي:$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); من هنا https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascriptوالنص المحدد بالكامل الذي أستخدمه (باستخدام البرنامج المساعد 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;

Answer 14

لقد وجدت أن البرنامج المساعد jQuery Calendar، بالنسبة لي على الأقل، بشكل عام يعمل بشكل أفضل لتحديد التواريخ.

Answer 15

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

Answer 16

إليك إجابتك وهي طريقة الحل. لا تريد استخدام jquery عندما تقوم بتقييد إدخال المستخدم في التحكم في مربع النص.

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

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

Answer 17

$("#my_txtbox").prop('للقراءة فقط'، صحيح)

عملت كالسحر..

Answer 18

بدلا من استخدام مربع النص يمكنك استخدام الزر أيضا.يعمل بشكل أفضل بالنسبة لي، حيث لا أريد أن يكتب المستخدمون التاريخ يدويًا.

Answer 19

أعلم أن هذا السؤال قد تمت الإجابة عليه بالفعل، وأن معظم الأشخاص يقترحون استخدامه readonly سمة.
أريد فقط مشاركة السيناريو الخاص بي وإجابتي.

بعد الإضافة readonly صفة لي عنصر HTML, ، لقد واجهت مشكلة لا أستطيع حلها هذا السمة كما required ديناميكيا.
حتى حاول الإعداد على حد سواء readonly و required في وقت إنشاء HTML.

لذلك سأقترح عدم استخدامه readonly إذا كنت تريد تعيينه كما required أيضًا.

بدلا من ذلك استخدم

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

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

هذا يسمح للضغط tab المفتاح فقط.
يمكنك إضافة المزيد رموز المفاتيح الذي تريد تجاوزه.

أنا أدناه رمز منذ أن قمت بإضافة كليهما readonly و required فإنه لا يزال يقدم النموذج.
بعد الإزالة readonly أنه يعمل بشكل صحيح.

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>

Answer 20

استبدال معرف منتقي الوقت:IDofDatetimePicker إلى معرفك.

سيؤدي هذا إلى منع المستخدم من إدخال أي مدخلات إضافية للوحة المفاتيح، ولكن سيظل المستخدم قادرًا على الوصول إلى نافذة الوقت المنبثقة.

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

جرب هذا المصدر:https://github.com/jonthornton/jquery-timepicker/issues/109

Answer 21

يحتوي هذا السؤال على الكثير من الإجابات القديمة ويبدو أن القراءة فقط هي الحل المقبول بشكل عام.أعتقد أن النهج الأفضل في المتصفحات الحديثة هو استخدام inputmode="none" في علامة إدخال HTML:

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

أو، إذا كنت تفضل القيام بذلك في البرنامج النصي:

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

لم أختبره على نطاق واسع، لكنه يعمل بشكل جيد على إعدادات Android التي استخدمته معها.

Answer 22

أو يمكنك، على سبيل المثال، استخدام حقل مخفي لتخزين القيمة...

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

وفي $("#my_txtbox").datepicker({ options:

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

Answer 23

إذا كنت تريد من المستخدم تحديد تاريخ من منتقي التاريخ ولكنك لا تريد أن يكتب المستخدم داخل مربع النص، فاستخدم الكود التالي:

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

});