Datepicker pops up on first focus
The first input field of my form gets focus after a few milliseconds after the document is ready (in my case, up to 50ms). Then the datepicker pops up if the first input field is date.
I need to focus on the first input field after page load and pop up the datepicker on focus event, but not immediately after page load. This means that if the first input element is a date, it gets focus, and after I click on it, the datepicker should show itself. Then all the other finalists should pop up on focus. I need to do it in such a way that I do not lose and focus again.
<input data-calendar-format="dd.MM.yyyy">
$(document).ready(function() {
$('input[data-calendar-format]').datepicker({
dateFormat: 'dd.mm.yy'
});
});
source to share
You can use the option beforeShow
to prevent opening datepicker
. If the page has just been loaded return false
. I used the time to determine if the page was loaded; if you are going to use the time, find a time that suits your needs.
$(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">
source to share
You can change the property showOn
on the first parameter of the datepicker to button
, hide the button in your css and add autofocus
to the input field. Adding an extra handler click
to the first input will help open the date before clicking elsewhere.
$(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">
source to share
Not ideal, but you can have two initializations, one for all datepickers and one for the first datepicker (if it's the first item):
$(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 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. If the field is focused, you will need to call the datepicker function to display the first time. Added an event click
to handle this.
You can see how he works on this JSFiddle: http://jsfiddle.net/sqjgk8y7/1/
source to share