blocks|key|1733761|text|要在获得焦点时弹出datepicker：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1733762|$(".selector").datepicker({+showOn:+'both'+})|code-block|syntax|javascript|1733763|如果不需要用户输入，请将以下内容添加到输入字段|1733764|<input+type="text"+name="date"+readonly="readonly"+/>|1733765|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To datepicker to popup on gain focus:

<pre><code>$(".selector").datepicker({ showOn: 'both' })
</code></pre>

If you don't want user input, add this to the input field

<pre><code>&lt;input type="text" name="date" readonly="readonly" /&gt;
</code></pre>

blocks|key|1733786|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1733787|$("#my_txtbox").keypress(function(event)+{event.preventDefault();});|code-block|syntax|javascript|1733788|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try

<pre><code>$("#my_txtbox").keypress(function(event) {event.preventDefault();});
</code></pre>

blocks|key|1733841|text|这个demo在某种程度上是通过将日历放在文本字段上来实现的，这样您就不能在其中键入内容。您还可以在HTML中将输入字段设置为只读。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1733842|<input+type="text"+readonly="true"+/>|code-block|syntax|javascript|1733843|entityMap|0|LINK|mutability|MUTABLE|url|http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html^0|2|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

This <a href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html" rel="nofollow noreferrer">demo</a> sort of does that by putting the calendar over the text field so you can't type in it. You can also set the input field to read only in the HTML to be sure.

<pre><code>&lt;input type="text" readonly="true" /&gt;
</code></pre>

blocks|key|1733938|text|我发现，至少对我来说，jQuery日历插件在选择日期方面效果更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1733939|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I've found that the jQuery Calendar plugin, for me at least, in general just works better for selecting dates.

blocks|key|1734027|text|如果您在多个地方重用日期选择器，那么也可以通过JavaScript修改文本框，方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1734028|$("#my_txtbox").attr(+'readOnly'+,+'true'+);|code-block|syntax|javascript|1734029|就在初始化datepicker的地方之后/之前。|1734030|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you are reusing the date-picker at multiple places then it would be apt to modify the textbox also via JavaScript by using something like:

<pre><code>$("#my_txtbox").attr( 'readOnly' , 'true' );
</code></pre>

right after/before the place where you initialize your datepicker.

blocks|key|1519109|text|<input+type="text"+readonly="true"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1519110|导致textbox在回发后失去其值。|unstyled|1519111|你应该使用Brad8118的建议，它工作得很好。|1519112|$("#my_txtbox").keypress(function(event)+{event.preventDefault();});|1519113|编辑:使用“keydown”而不是“keypress”让它在IE上工作。|1519114|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>&lt;input type="text" readonly="true" /&gt;
</code></pre>

causes the textbox to lose its value after postback. 

You rather should use Brad8118's suggestion which is working perfectly.

<pre><code>$("#my_txtbox").keypress(function(event) {event.preventDefault();});
</code></pre>

EDIT:
to get it working for IE use 'keydown' instead of 'keypress'

blocks|key|1734131|text|或者，例如，您可以使用隐藏字段来存储值...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1734132|++++++++<asp:HiddenField+ID="hfDay"+runat="server"+/>|code-block|syntax|javascript|1734133|在$(“#my_txtbox”).datepicker中({+options：|1734134|++++++++onSelect:+function+(dateText,+inst)+{
++++++++++++$("#<%25+=hfDay.ClientID+%25>").val(dateText);
++++++++}|1734135|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Or you could, for example, use a hidden field to store the value...

<pre><code> &lt;asp:HiddenField ID="hfDay" runat="server" /&gt;
</code></pre>

and in the $("#my_txtbox").datepicker({ options:

<pre><code> onSelect: function (dateText, inst) {
 $("#&lt;% =hfDay.ClientID %&gt;").val(dateText);
 }
</code></pre>

blocks|key|1734178|text|如果希望用户从日期选择器中选择日期，但不希望用户在文本框中键入，则使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1734179|<script+type="text/javascript">
$(function+()+{
++++$("#datepicker").datepicker({+maxDate:+"-1D"+}).attr('readonly',+'readonly');
++++$("#datepicker").readonlyDatepicker(true);

});|code-block|syntax|javascript|1734180|​|1734181|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you want the user to select a date from the datepicker but you dont want the user to type inside the textbox then use the following code :

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

});
</code></pre>

blocks|key|1519227|text|$('.date').each(function+(e)+{
++++if+($(this).attr('disabled')+!=+'disabled')+{
++++++++$(this).attr('readOnly',+'true');
++++++++$(this).css('cursor',+'pointer');
++++++++$(this).css('color',+'#5f5f5f');
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1519228|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|1734252|text|这就是你的答案，当你在textbox控件中限制用户输入时，solve.You不想使用jquery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1734253|<input+type="text"+id="my_txtbox"+readonly+/>++

<input+type="text"+id="my_txtbox"+readonly="true"/>|code-block|syntax|javascript|1734254|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is your answer which is way to solve.You do not want to use jquery when you restricted the user input in textbox control.

<pre><code>&lt;input type="text" id="my_txtbox" readonly /&gt; &lt;!--HTML5--&gt;

&lt;input type="text" id="my_txtbox" readonly="true"/&gt;
</code></pre>

blocks|key|1519284|text|$("#txtfromdate").datepicker({+++++++++
++++numberOfMonths:+2,
++++maxDate:+0,+++++++++++++++
++++dateFormat:+'dd-M-yy'+++++++
}).attr('readonly',+'readonly');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1519285|在jquery中添加readonly属性。|unstyled|1519286|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

add the readonly attribute in the jquery.

blocks|key|1734308|text|$("#my_txtbox").prop('readonly'，true)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1734309|就像一个护身符..|1734310|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

$("#my_txtbox").prop('readonly', true) 

worked like a charm..

blocks|key|1519390|text|除了使用textbox之外，你还可以使用按钮。最适合我，我不想让用户手动写日期。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519391|​|1519392|📷|atomic|offset|length|1519393|1519394|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/71041268a4c2536af5b39714ee7cddaa.gif|imageAlt^0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@$G|V|H|W|1|X]]|A|$]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

Instead of using textbox you can use button also. Works best for me, where I don't want users to write date manually.

<a href="https://i.stack.imgur.com/h7zpq.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h7zpq.gif" alt="enter image description here"></a>

blocks|key|1519419|text|初始化日期选择器后：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519420|$(".project-date").datepicker({
++++dateFormat:+'d+M+yy'
});

$(".project-date").keydown(false);|code-block|syntax|javascript|1519421|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After initialising the date picker:
<pre><code>$(&quot;.project-date&quot;).datepicker({
 dateFormat: 'd M yy'
});

$(&quot;.project-date&quot;).keydown(false);
</code></pre>

blocks|key|1734434|text|将time+picker:+IDofDatetimePicker的id替换为您的ID。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1734435|这将阻止用户输入任何进一步的键盘输入，但用户仍将能够访问时间弹出窗口。|1734436|$(“#my_txtbox”).keypress(function(事件)+{event.preventDefault();})；|1734437|试试这个来源：https://github.com/jonthornton/jquery-timepicker/issues/109|offset|length|1734438|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jonthornton/jquery-timepicker/issues/109^0|0|0|0|7|1N|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

replace the ID of time picker:
IDofDatetimePicker to your id.

This will prevent the user from entering any further keyboard inputs but still, the user will be able to access the time popup.

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

Try this
source:
<a href="https://github.com/jonthornton/jquery-timepicker/issues/109" rel="nofollow noreferrer">https://github.com/jonthornton/jquery-timepicker/issues/109</a>

blocks|key|1734519|text|我知道这个线程很旧，但是对于其他遇到同样问题的人来说，实现@Brad8118解决方案(我更喜欢，因为如果你选择只读输入，那么用户将无法删除从datepicker插入的日期值，如果他选择)，并且还需要防止用户粘贴一个值(正如@ErikPhilips建议需要的那样)，我在这里添加了以下内容，这对我有效：$("#my_txtbox").bind('paste',function(e)+{+e.preventDefault();+//disable+paste+});+from+here+https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript和我使用的整个特定脚本(使用fengyuanchen/datepicker插件)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1734520|$('[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;|code-block|syntax|javascript|1734521|entityMap|0|LINK|mutability|MUTABLE|url|https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript^0|46|2A|6R|2V|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

I know this thread is old, but for others who encounter the same problem, that implement @Brad8118 solution (which i prefer, because if you choose to make the input readonly then the user will not be able to delete the date value inserted from datepicker if he chooses) and also need to prevent the user from pasting a value (as @ErikPhilips suggested to be needed), I let this addition here, which worked for me: 
<code>$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });</code> from here <a href="https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript" rel="nofollow noreferrer">https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript</a>
and the whole specific script used by me (using fengyuanchen/datepicker plugin instead):

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

blocks|key|1734560|text|这个问题有很多老的答案，而readonly似乎是普遍接受的解决方案。我认为在现代浏览器中更好的方法是在HTML标记中使用inputmode="none"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1734561|<input+type="text"+...+inputmode="none"+/>|code-block|syntax|javascript|1734562|或者，如果您更喜欢在脚本中执行此操作：|1734563|$(selector).attr('inputmode',+'none');|1734564|我没有对它进行过广泛的测试，但它在我使用过的Android设置上工作得很好。|1734565|entityMap^0|1O|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

This question has a lot of older answers and readonly seems to be the generally accepted solution. I believe the better approach in modern browsers is to use the <code>inputmode="none"</code> in the HTML input tag:

<pre><code>&lt;input type="text" ... inputmode="none" /&gt;
</code></pre>

or, if you prefer to do it in script:

<pre><code>$(selector).attr('inputmode', 'none');
</code></pre>

I haven't tested it extensively, but it is working well on the Android setups I have used it with.

blocks|key|1519645|text|也可以使用onkeypress="return+false;"，而不是添加readonly|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1519646|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/jsref/event_onkeypress.asp|1|https://www.w3schools.com/tags/att_input_readonly.asp^0|5|Q|0|11|8|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Instead of adding <a href="https://www.w3schools.com/tags/att_input_readonly.asp" rel="nofollow noreferrer">readonly</a> you can also use <a href="https://www.w3schools.com/jsref/event_onkeypress.asp" rel="nofollow noreferrer">onkeypress="return false;"</a>

blocks|key|1519658|text|在我例子中，我使用了disableTextInput属性|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1519659|$(+".datepicker"+).datepicker({'dateFormat'+:+'d-m-y',+'disableTextInput':true+});|code-block|syntax|javascript|1519660|entityMap^0|A|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In my case i have use <code>disableTextInput</code> property
<pre><code>$( &quot;.datepicker&quot; ).datepicker({'dateFormat' : 'd-m-y', 'disableTextInput':true });
</code></pre>

How do I use the jQuery Datepicker with a textbox input:

<pre><code>$("#my_txtbox").datepicker({
 // options
});
</code></pre>

that doesn't allow the user to input random text in the textbox.
I want the Datepicker to pop up when the textbox gains focus or the user clicks on it, but I want the textbox to ignore any user input using the keyboard (copy &amp; paste, or any other). I want to fill the textbox exclusively from the Datepicker calendar.

Is this possible?

jQuery 1.2.6 
Datepicker 1.5.2

jQuery Datepicker with text input that doesn't allow user input

Android

jQuery

HTML5

如何通过文本框输入使用jQuery日期选择器：$("#my_txtbox").datepicker({  // options});这不允许用户在文本框中输入随机文本。我希望文本框获得焦点或用户单击它时弹出日期选择器，但我希望文本框忽略使用键盘的任何用户输入(复制和粘贴，或任何其他)。我只想从Datepicker日历中...

问带有不允许用户输入的文本输入的jQuery日期选择器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有不允许用户输入的文本输入的jQuery日期选择器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有不允许用户输入的文本输入的jQuery日期选择器
EN