在输入字段单击时显示 JQuery UI 日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10718082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show JQuery UI datepicker on input field click?
提问by alexg
OK maybe this is a trivial issue but I'm very interested to see if anyone has any ideas on this:
好吧，也许这是一个微不足道的问题，但我很想知道是否有人对此有任何想法：
I am using JQuery UI. I have an <input id="#myfield" type="text">field and I call $('#myfield').datepicker(). The datepicker shows whenever the field gets focus. But the field is the first one in my form and is already in focus when it loads, so clicking on the field doesn't show it. Also, if I close the datepicker with the Esc key, then I can't open it again by clicking on the field, for the same reason: it's already in focus.
我正在使用 JQuery UI。我有一个<input id="#myfield" type="text">字段，我打电话给$('#myfield').datepicker(). 每当该字段获得焦点时，日期选择器就会显示。但是该字段是我表单中的第一个字段，并且在加载时已经处于焦点状态，因此单击该字段不会显示它。此外，如果我使用 Esc 键关闭日期选择器，则无法通过单击该字段再次打开它，原因相同：它已经处于焦点中。
I am aware that I could set the parameter .datepicker({showOn: 'button'})but I don't want the button. Is there any way to have the datepicker appear when the field gets focus OR is clicked when already in focus? I already tried $('#myfield').click( function () { $(this).focus() } )and it makes the datepicker open correctly when I click the input field, but then when I select a date it doesn't appear in the field.
我知道我可以设置参数，.datepicker({showOn: 'button'})但我不想要按钮。有没有办法让日期选择器在字段获得焦点时出现或在已经焦点时单击？我已经尝试过$('#myfield').click( function () { $(this).focus() } )，当我单击输入字段时，它会使日期选择器正确打开，但是当我选择一个日期时，它不会出现在该字段中。
回答by Rajan Rawal
Try this
尝试这个
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#date1').datepicker();
$('#date1').focus(function(){
$('#date1').datepicker('show');
});
$('#date1').click(function(){
$('#date1').datepicker('show');
});
//$('#ui-datepicker-div').show();
$('#date1').datepicker('show');
});
</script>
</head>
<body>
<input type="text" name="date1" id='date1'>
</body>
</html>
回答by Rohan Büchner
This prob wont answer your question, but could be a work around, if your issue of not having the date picker button, is related to having the date picker button... if that makes any sense?
这个 prob 不会回答你的问题，但可能是一个解决方法，如果你没有日期选择器按钮的问题与日期选择器按钮有关......如果这有意义吗？
I had an issue where i didn't want to have the button because of users tabbing through my form/page, and I didn't want the button to have focus. (Weird UI experience)
我遇到了一个问题，因为用户在我的表单/页面中切换，我不想拥有该按钮，而且我不希望该按钮具有焦点。（奇怪的用户界面体验）
If that's your case as well... you can always just remove its focus by doing the following.. (It'll also indirectly solve the problem you're having now.)
如果这也是你的情况......你总是可以通过执行以下操作来移除它的焦点......（它也将间接解决你现在遇到的问题。）
$('#field').datepicker({
showOn: 'button',
buttonImage: "/image_path/image.png",
}).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");
回答by Alexandre
I had a similar scenario: First field on the page an it should loads closed, without the button, and be opened only on user click. But it was in a closed 'searchbar' component, so changing the default behavior wasn't an option. Here's my workaround:
我有一个类似的场景：页面上的第一个字段应该加载关闭，没有按钮，并且只有在用户点击时才能打开。但它在一个封闭的“搜索栏”组件中，所以改变默认行为不是一个选项。这是我的解决方法：
$(document).ready(function () {
//getting the controls on the form context
var calendarios = $('.calendarBox', "#frmOccurrencesHistory");
//set an invalid option - avoid open on focus and show the buttons
calendarios.datepicker("option", "showOn", "click");
//handle click button
calendarios.each(function () {
$(this).click(function () {
$(this).datepicker('show');
});
});
});
Not pretty, not perfect, there′s a flash of the calendar when pages load, but that's how far I've come
不漂亮，不完美，页面加载时日历会闪烁，但这就是我走了多远
回答by Girish
$("#datepicker").datepicker({
dateFormat:'dd/M/yy',
minDate: 'now',
changeMonth:true,
changeYear:true,
showOn: "focus",
//buttonImage: "YourImage",
buttonImageOnly: true,
yearRange: "-100:+0",
});
$( "datepicker" ).datepicker( "option", "disabled", true );
