Datepicker всплывает при первом фокусе

Question

Первое поле ввода моей формы получает фокус после нескольких миллисекунд после готовности документа (в моем случае до 50 мс). Затем всплывает датапикер, если первое поле ввода - это дата.

Что мне нужно, так это сосредоточиться на первом поле ввода после загрузки страницы и всплывать datepicker на событии фокуса, но не сразу после загрузки страницы. Это означает, что если первый элемент ввода является датой, он получает фокус, и после того, как я нажму на него, датпикер должен показать себя. Тогда все остальные финалисты должны всплывать на фокусе. Мне нужно сделать это таким образом, чтобы я не потерял и снова сосредоточился.

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

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

Answer 1

Вы можете использовать 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">

Answer 2

Вы можете изменить showOn недвижимости на первой DatePicker в 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">

Answer 3

Не идеально, но вы можете иметь два инициализаций: один для всех datepickers, а другой для первого DatePicker (если это первый элемент):

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

}); 

Обновление. Если поле сфокусировано, вам нужно будет вызвать функцию datepicker для отображения в первый раз. Добавлено событие click, чтобы справиться с этим.

Вы можете видеть, что работает над этим JSFiddle: http://jsfiddle.net/sqjgk8y7/1/