Question

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

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

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

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

Answer 2

这个问题不会回答你的问题，但如果你没有日期选择按钮的问题与日期选择器按钮相关，那可能是一个解决方法...如果这有意义吗？

我有一个问题，我不想拥有按钮，因为用户通过我的表单/页面进行选项卡，我不希望按钮具有焦点。（奇怪的UI体验）

如果这也是你的情况......你可以随时通过以下方式消除它的焦点..（它也会间接解决你现在遇到的问题。）

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

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

不漂亮，不完美，当页面加载时会有一缕日历，但这就是我走了多远

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

在输入字段上显示JQuery UI datepicker点击？

4 个答案: