在输入字段单击时显示 JQuery UI 日期选择器？答案

【问题标题】：Show JQuery UI datepicker on input field click?在输入字段单击时显示 JQuery UI 日期选择器？
【发布时间】：2012-05-29 21:23:46
【问题描述】：

好吧，也许这是一个微不足道的问题，但我很想看看是否有人对此有任何想法：

我正在使用 JQuery UI。我有一个<input id="#myfield" type="text"> 字段，我打电话给$('#myfield').datepicker()。每当字段获得焦点时，日期选择器就会显示。但是该字段是我表单中的第一个字段，并且在加载时已经成为焦点，因此单击该字段不会显示它。此外，如果我使用 Esc 键关闭日期选择器，则无法通过单击该字段再次打开它，原因相同：它已经成为焦点。

我知道我可以设置参数.datepicker({showOn: 'button'})，但我不想要按钮。有没有办法让日期选择器出现在字段获得焦点或在已经获得焦点时单击？我已经尝试过$('#myfield').click( function () { $(this).focus() } )，当我单击输入字段时它会正确打开日期选择器，但是当我选择一个日期时它不会出现在字段中。

【问题讨论】：

我很喜欢这个按钮，用起来很正常，事实上我想说不使用它是一个糟糕的决定。
通常我会同意你的看法。请参阅 Rohan Büchner 关于我为什么不想要该按钮的答案下方的评论。

标签： jquery jquery-ui focus datepicker jquery-ui-datepicker

【解决方案1】：

试试这个

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

【讨论】：

谢谢，我想在启动时打开日期选择器确实有意义，它确实解决了一半的问题。它不能解决如何在按 Esc 键后单击字段来重新打开日期选择器的问题，但我最好解决实际的错误而不是玩琐碎的问题:)
@RajanRawal ：感谢 Buddy 的回答，我从过去 3 天开始就在敲我的头
@Ashley 我不知道你的具体用途是什么，但考虑现在使用 Bootstrap 日期选择器并确保它不会与 jquery ui datepicker 冲突。

【解决方案2】：

这个问题不会回答你的问题，但如果你没有日期选择器按钮的问题与有日期选择器按钮有关......如果这有意义吗？

我遇到了一个问题，我不想让按钮出现，因为用户在我的表单/页面中切换，并且我不希望按钮获得焦点。（奇怪的 UI 体验）

如果你也是这种情况......你总是可以通过执行以下操作来移除它的焦点......（它也将间接解决你现在遇到的问题。）

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");

【讨论】：

谢谢你的聪明。实际上我不想要按钮的原因是为了保持一致性。在我的应用程序中，我还有一个带有日期列的 jqGrid，其中一个按钮看起来很难看，并且会占用宝贵的屏幕宽度，所以我希望网格外的日期字段与网格内的字段相似。不过，我赞成你的回答。

【解决方案3】：

我有一个类似的场景：页面上的第一个字段应该加载关闭，没有按钮，并且仅在用户单击时打开。但它位于一个封闭的“搜索栏”组件中，因此无法更改默认行为。这是我的解决方法：

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

不漂亮，不完美，页面加载时日历会闪烁，但这就是我已经走了多远

【讨论】：

【解决方案4】：

 $("#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 );

【讨论】：