8

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

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

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

4

4 回答 4

19

试试这个

<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>
于 2012-05-23T10:49:21.673 回答
2

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

我有一个问题，我不想拥有按钮，因为用户在我的表单/页面上切换，我不希望按钮有焦点。（奇怪的用户界面体验）

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

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");
于 2012-05-23T10:48:12.300 回答
1

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

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

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

于 2015-08-19T13:14:55.397 回答
0 
 $("#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 );
于 2017-10-23T09:25:42.603 回答