jquery всплывающее окно выбора даты и времени - PullRequest
Новая
       7

jquery всплывающее окно выбора даты и времени

0 голосов
/ 05 февраля 2020

Я использую плагин jQuery DateTimePicker от http://xdsoft.net/jqplugins/datetimepicker/. Я не хочу открывать всплывающее окно календаря, когда фокусируюсь на текстовом поле, вместо этого я хочу дать некоторую кнопку с изображением в конце текстового поля, а когда пользователь нажимает на кнопку с изображением, открывается только всплывающее окно календаря для выбора времени и даты. Когда фокус на текстовое поле пользователь должен иметь возможность ввести вручную. если всплывающее окно появляется, иногда всплывающее окно появляется над текстовым полем, поэтому мы не видим ничего в текстовом поле для ввода вручную. Пример кода выглядит следующим образом: 

     $('#StartDate').datetimepicker({
            value: defaultStartDateTime,
            step: 15,
            closeOnDateSelect: true,
            format: 'm/d/Y H:i',
            mask: true }); 
     $('#StartDate').focus(function () {             
            $('#clientLogsStartDate').datetimepicker('hide');                           
     });

1 Ответ

0 голосов
/ 05 февраля 2020

Попробуйте отключить datetimepicker события 

open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart


$('#StartDate').datetimepicker({
  value: new Date(),
  step: 15,
  closeOnDateSelect: true,
  format: 'm/d/Y H:i',
  mask: true
}).off('open.xdsoft focusin.xdsoft mousedown.xdsoft touchstart')

$('button').on('click', function() {
  $('#StartDate').datetimepicker('show')
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />

<input id="StartDate" type="text">
<button>Show</button>
...