带有不允许用户input的文本input的jQuery Datepicker
如何使用带有文本框input的jQuery Datepicker：
$("#my_txtbox").datepicker({ // options }); 这不允许用户在文本框中input随机文本。 当文本框获得焦点或用户点击它时，我希望DatePickerpopup，但我希望文本框忽略使用键盘（复制粘贴或任何其他）的任何用户input。 我想从Datepicker日历中专门填充文本框。
这可能吗？
jQuery 1.2.6
Datepicker 1.5.2
你应该可以在文本input中使用readonly属性，jQuery仍然可以编辑它的内容。
<input type='text' id='foo' readonly='true'>
根据我的经验，我会推荐Adhip Guptabuild议的解决scheme：
$("#my_txtbox").attr( 'readOnly' , 'true' );
下面的代码不会让用户input新的字符，但会允许他们删除字符：
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
此外，这将使那些禁用JavaScript的人无效：
<input type="text" readonly="true" />
如果您在多个地方重复使用dateselect器，那么也可以通过使用类似于以下内容的JavaScript来修改文本框：
$("#my_txtbox").attr( 'readOnly' , 'true' );
在你初始化dateselect器的地方之后/之前。
尝试
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
<input type="text" readonly="true" />
导致回发后文本框失去其价值。
你应该使用Brad8118的build议，这是完美的工作。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
编辑：让IE浏览器使用'keydown'而不是'按键'
dateselect器以增益为焦点popup：
$(".selector").datepicker({ showOn: 'both' })
如果您不想要用户input，请将其添加到input字段
<input type="text" name="date" readonly="readonly" />
$("#txtfromdate").datepicker({ numberOfMonths: 2, maxDate: 0, dateFormat: 'dd-M-yy' }).attr('readonly', 'readonly');
在jquery中添加readonly属性。
你有两个select来完成这个工作。 （我所知道的）
-
选项A：使您的文本字段只读。 它可以做到如下。
-
选项B：改变光标的焦点。 将ti设置为模糊。 它可以通过设置属性
onfocus="this.blur()"到您的dateselect器文本字段。
例如： <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
在初始化dateselect器之后：
$(".project-date").datepicker({ dateFormat: 'd M yy' }); $(".project-date").keydown(false);
这个演示sorting是通过将日历放在文本字段上，所以你不能input。 您也可以将input字段设置为仅在HTML中可读。
<input type="text" readonly="true" />
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input { background-color: white; cursor: pointer; }
我发现jQuery Calendar插件对我来说至less在一般情况下更适合selectdate。
$('.date').each(function (e) { if ($(this).attr('disabled') != 'disabled') { $(this).attr('readOnly', 'true'); $(this).css('cursor', 'pointer'); $(this).css('color', '#5f5f5f'); } });
这是你的答案是解决的办法。当你限制用户input文本框控件时，你不想使用jQuery。
<input type="text" id="my_txtbox" readonly /> <!--HTML5--> <input type="text" id="my_txtbox" readonly="true"/>
$（“＃my_txtbox”）。prop（'readonly'，true）
像魅力一样工作
而不是使用文本框，你也可以使用button。 最适合我的地方，我不希望用户手动写date。
我刚刚遇到这个，所以我在这里分享。 这是选项
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
我知道这个问题已经回答了，最多build议使用readonly attribure。
我只是想分享我的情况和答案。
添加readonly属性到我的HTML元素后 ，我遇到了问题，我不能根据requireddynamic地创build此属性。
甚至在HTML创build时尝试设置为readonly和required 。
所以我会build议不要使用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>
将时间select器的ID：IDofDatetimePickerreplace为您的ID。
这将防止用户input任何其他的键盘input，但用户仍然可以访问时间popup。
$（“＃my_txtbox”）。keypress（function（event）{event.preventDefault（）;}）;
试试这个来源： https ： //github.com/jonthornton/jquery-timepicker/issues/109
或者，你可以，例如，使用隐藏字段来存储值…
<asp:HiddenField ID="hfDay" runat="server" />
和$（“＃my_txtbox”）。datepicker（{options：
onSelect: function (dateText, inst) { $("#<% =hfDay.ClientID %>").val(dateText); }
如果您希望用户从datepicker中select一个date，但不希望用户在文本框内input，请使用以下代码：
<script type="text/javascript"> $(function () { $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly'); $("#datepicker").readonlyDatepicker(true); });
