jQuery Datepicker พร้อมการป้อนข้อความที่ไม่อนุญาตให้ผู้ใช้ป้อน

ฉันจะใช้ jQuery Datepicker กับอินพุตกล่องข้อความได้อย่างไร:

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

ที่ไม่อนุญาตให้ผู้ใช้ป้อนข้อความแบบสุ่มในกล่องข้อความ ฉันต้องการให้ Datepicker ปรากฏขึ้นเมื่อกล่องข้อความได้รับโฟกัสหรือผู้ใช้คลิกที่มัน แต่ฉันต้องการให้กล่องข้อความนั้นละเว้นการป้อนข้อมูลของผู้ใช้โดยใช้แป้นพิมพ์ (คัดลอก & วางหรืออื่น ๆ ) ฉันต้องการที่จะกรอกกล่องข้อความเฉพาะจากปฏิทิน Datepicker

เป็นไปได้ไหม

jQuery 1.2.6
Datepicker 1.5.2

คุณควรใช้แอททริบิวอ่านอย่างเดียวในการป้อนข้อความและ jQuery จะยังสามารถแก้ไขเนื้อหาได้

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

จากประสบการณ์ของฉันฉันจะแนะนำวิธีแก้ปัญหาที่แนะนำโดย Adhip Gupta:

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

รหัสต่อไปนี้จะไม่อนุญาตให้ผู้ใช้พิมพ์อักขระใหม่ แต่จะอนุญาตให้ลบอักขระได้:

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

นอกจากนี้จะทำให้รูปแบบไร้ประโยชน์สำหรับผู้ที่ปิดใช้งาน JavaScript:

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

ลอง

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

หากคุณนำตัวใช้เลือกวันที่มาใช้ซ้ำในหลาย ๆ ที่มันจะเป็นการดีที่จะแก้ไขช่องข้อความด้วย JavaScript โดยใช้บางสิ่งเช่น:

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

หลังจาก / ก่อนสถานที่ที่คุณเริ่มต้น datepicker ของคุณ

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

ทำให้กล่องข้อความสูญเสียค่าหลังจาก postback

คุณควรใช้คำแนะนำของ Brad8118 ซึ่งทำงานได้อย่างสมบูรณ์

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

แก้ไข: เพื่อให้มันใช้งานได้กับ IE ให้ใช้ 'keydown' แทน 'keypress'

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

เพิ่มคุณสมบัติอ่านได้อย่างเดียวใน jquery

คุณมีสองตัวเลือกในการทำสิ่งนี้ให้สำเร็จ (เท่าที่ฉันรู้)

1. ตัวเลือก A:ทำให้ฟิลด์ข้อความของคุณอ่านได้อย่างเดียว สามารถทำได้ดังนี้

2. ตัวเลือก B:เปลี่ยนเคอร์เซอร์บนโฟกัส ตั้งค่า ti ให้เบลอ สามารถทำได้โดยการตั้งค่าคุณลักษณะ onfocus="this.blur()"ให้กับฟิลด์ข้อความตัวใช้เลือกวันที่ของคุณ

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

หลังจากเริ่มต้นตัวใช้เลือกวันที่:

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

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

หากต้องการ datepicker เพื่อป๊อปอัปเมื่อได้รับโฟกัส:

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

หากคุณไม่ต้องการอินพุตของผู้ใช้ให้เพิ่มส่วนนี้ในฟิลด์อินพุต

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

ฉันเพิ่งเจอสิ่งนี้ดังนั้นฉันแบ่งปันที่นี่ นี่คือตัวเลือก

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

นี่คือรหัส

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

นี่คือซอ:

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

bootstrap-datetimepicker.js เวอร์ชันของฉันคือ 4.17.45

การสาธิตนี้ทำโดยการวางปฏิทินไว้เหนือช่องข้อความเพื่อให้คุณไม่สามารถพิมพ์ได้ คุณยังสามารถตั้งค่าฟิลด์อินพุตให้อ่านได้เฉพาะใน HTML เพื่อให้แน่ใจ

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

HTML

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

CSS

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

ฉันรู้ว่าเธรดนี้เก่า แต่สำหรับผู้อื่นที่พบปัญหาเดียวกันที่ใช้โซลูชัน @ Brad8118 (ซึ่งฉันชอบเพราะถ้าคุณเลือกที่จะป้อนข้อมูลแบบอ่านอย่างเดียวผู้ใช้จะไม่สามารถลบค่าวันที่ที่แทรกจาก datepicker หากเขาเลือก) และต้องป้องกันไม่ให้ผู้ใช้วางค่า (ตามที่ @ErikPhilips แนะนำให้ต้องการ) ฉันให้การเพิ่มนี้ที่นี่ซึ่งใช้งานได้สำหรับฉัน: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });จากที่นี่https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-paste-in-textbox-using-jquery-javascript และสคริปต์เฉพาะทั้งหมดที่ฉันใช้ (ใช้ fengyuanchen / datepicker plugin แทน):

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

แทนที่จะเพิ่มแบบอ่านอย่างเดียวคุณสามารถใช้onkeypress = "return false;"

ฉันพบว่าปลั๊กอิน jQuery Calendar สำหรับฉันอย่างน้อยโดยทั่วไปจะใช้งานได้ดีกว่าสำหรับการเลือกวันที่

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

นี่คือคำตอบของคุณซึ่งเป็นวิธีการแก้ปัญหาคุณไม่ต้องการใช้ jQuery เมื่อคุณ จำกัด การป้อนข้อมูลผู้ใช้ในการควบคุมกล่องข้อความ

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

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

$ ("# my_txtbox"). prop ('อ่านอย่างเดียว', จริง)

ทำงานเหมือนมีเสน่ห์ ..

แทนที่จะใช้กล่องข้อความคุณสามารถใช้ปุ่มได้เช่นกัน ทำงานได้ดีที่สุดสำหรับฉันที่ฉันไม่ต้องการให้ผู้ใช้เขียนวันที่ด้วยตนเอง

ฉันรู้ว่าคำถามนี้ตอบแล้วและส่วนใหญ่แนะนำให้ใช้readonlyattribure
ฉันแค่ต้องการแบ่งปันสถานการณ์และคำตอบของฉัน

หลังจากเพิ่ม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>

แทนที่ ID ตัวเลือกเวลา: IDofDatetimePicker เป็น id ของคุณ

วิธีนี้จะป้องกันผู้ใช้จากการป้อนคีย์บอร์ดเพิ่มเติม แต่ยังผู้ใช้จะสามารถเข้าถึงป๊อปอัพเวลา

$ ("# my_txtbox"). keypress (ฟังก์ชั่น (เหตุการณ์) {event.preventDefault ();});

ลองใช้แหล่งที่มานี้: https://github.com/jonthornton/jquery-timepicker/issues/109

คำถามนี้มีคำตอบเก่า ๆ จำนวนมากและดูเหมือนเป็นคำตอบที่ยอมรับกันโดยทั่วไป ฉันเชื่อว่าวิธีที่ดีกว่าในเบราว์เซอร์สมัยใหม่คือการใช้inputmode="none"แท็กอินพุต HTML:

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

หรือถ้าคุณต้องการที่จะทำมันในสคริปต์:

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

ฉันไม่ได้ทำการทดสอบอย่างกว้างขวาง แต่มันใช้งานได้ดีกับการตั้งค่า Android ที่ฉันใช้

ตัวอย่างเช่นคุณสามารถใช้ฟิลด์ที่ซ่อนไว้เพื่อเก็บค่า ...

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

และใน $ ("# my_txtbox") datepicker ({ตัวเลือก:

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

หากคุณต้องการให้ผู้ใช้เลือกวันที่จาก datepicker แต่คุณไม่ต้องการให้ผู้ใช้พิมพ์ภายในกล่องข้อความจากนั้นใช้รหัสต่อไปนี้:

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

});