第一个焦点会弹出日期选择器
Datepicker pops up on first focus
表单的第一个输入字段在文档准备好几毫秒后获得焦点(在我的例子中最多50毫秒)。如果第一个输入字段是日期,则会弹出日期选择器。
我需要的是将焦点放在页面加载后的第一个输入字段上,并在焦点事件上弹出日期拾取器,但不是在页面加载后立即。这意味着如果第一个输入元素是一个日期,它获得焦点,在我点击它之后,日期选择器应该显示自己。然后所有其他的日期选择器应该会在焦点上弹出。我需要这样做,这样我就不会再分散注意力了。
<input data-calendar-format="dd.MM.yyyy">
$(document).ready(function() {
$('input[data-calendar-format]').datepicker({
dateFormat: 'dd.mm.yy'
});
});
您可以使用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">
您可以将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">
不理想,但是您可以有两个初始化:一个用于所有日期拾取器,另一个用于第一个日期拾取器(如果它是第一个元素):
$(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");
});
});
Update:如果字段是集中的,您需要触发日期选择器来显示第一次。添加了一个click
事件来处理这个问题。
您可以看到它在这个JSFiddle上工作:http://jsfiddle.net/sqjgk8y7/1/
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期