Datepicker弹出第一个焦点

我的表单的第一个输入字段在文档准备好几个毫秒后获得焦点（在我的情况下可达50 ms）。然后弹出日期选择器，以防第一个输入字段是日期。Datepicker弹出第一个焦点

我需要的是在页面加载后关注第一个输入字段，并在焦点事件上弹出日期选择器，但不会在页面加载后立即生效。这意味着如果第一个输入元素是一个日期，它会获得焦点，在点击它之后，日期选择器应该显示它自己。然后所有其他日期选择器应该弹出焦点。我需要这样做，所以我不会再放松并重新获得焦点。

<input data-calendar-format="dd.MM.yyyy"> 

$(document).ready(function() { 
    $('input[data-calendar-format]').datepicker({ 
     dateFormat: 'dd.mm.yy' 
    }); 
});

来源

2015-07-28 Lejla

是你想要的东西是什么呢？ –

你可以做一些jsfiddle的努力？ – Janty

页面加载。第一个输入字段获得焦点并将光标置于其中。点击它之后 - 无需首先点击日期选择器就会显示。带日期选择器的所有其他输入都会显示日期选择器的焦点。 – Lejla

您可以使用beforeShow选项来防止打开datepicker选项。如果页面刚刚加载return false。我用时间来确定刚加载的页面;如果你打算用时间找一个适合你需要的时间。

$(document).ready(function() { 
 
    var dt = Date.now(); 
 
    $('input[data-calendar-format]').datepicker({ 
 
     dateFormat: 'dd.mm.yy', 
 
     beforeShow: function() { 
 
      if(Date.now() - dt < 51) {    
 
       return false; 
 
      } 
 
     } 
 
    }); 
 
    $(':input').first().focus().on('click',function() { 
 
     $(this).datepicker('show'); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<input data-calendar-format="dd.MM.yyyy">

来源

2015-07-28 12:41:30 PeterKA

即使在这种情况下，你必须放松焦点，然后再次获得它。 – Lejla

@Lejla看看更新后的版本。 ..不是因为你有一个关注50ms后的第一个元素的过程，你不需要'.first（）。focus（）'部分。 – PeterKA

您可以在第一日期选择器的showOn属性更改为button，隐藏在你的CSS的按钮，添加一个autofocus您输入字段。在第一个输入中添加额外的click处理程序将有助于在单击其他任何地方之前打开日期选择器。

$(document).ready(function() { 
 
    $('input[data-calendar-format]').datepicker({ 
 
    dateFormat: 'dd.mm.yy', 
 
    showOn: "button" 
 
    }); 
 
    $('.more-datepickers').datepicker({ 
 
    dateFormat: 'dd.mm.yy', 
 
    showOn: "focus" 
 
    }); 
 
    $('input[data-calendar-format]').on('click', function() { 
 
    $(this).datepicker("show"); 
 
    }) 
 
});

.ui-datepicker-trigger { 
 
    display: none; 
 
}

<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 

 
<input data-calendar-format="dd.MM.yyyy" autofocus /> 
 
<input class="more-datepickers"> 
 
<input class="more-datepickers">

来源

2015-07-28 12:56:41 DavidDomain

并不理想，但你可以有两个初始化：一个为所有datepickers，另一个用于第一个日期选择器（如果它是第一个元素）：

$(document).ready(function() { 

    // all the datepickers that are not the first child 
    $('input[data-calendar-format]:not(:nth-child(1))').datepicker({ 
     dateFormat: 'dd.mm.yy' 
    }); 

    // the first child if it's a datepicker 
    $('input[data-calendar-format]:nth-child(1)').focus().datepicker({ 
     dateFormat: 'dd.mm.yy' 
    }).on("click", function() { 
     // the field is focused, so we need to trigger datepicker to show the first time 
     $(this).datepicker("show"); 
    }); 

});

更新：如果该字段关注，则需要触发日期选择器才能第一次显示。添加了一个click事件来处理。

你可以看到它在做这个的jsfiddle：http://jsfiddle.net/sqjgk8y7/1/

来源

2015-07-28 12:56:50

Datepicker弹出第一个焦点

回答

相关问题