Jquery Datetime Picker должен открываться только при нажатии на изображение календаря - PullRequest
Новая
       11

Jquery Datetime Picker должен открываться только при нажатии на изображение календаря

0 голосов
/ 16 января 2020

Я использую Jquery datetimepicker. Я не хочу открывать календарь на вкладке в текстовое поле. Я хочу разместить изображение календаря в конце текстового поля. Когда я нажимаю один раз на изображение календаря, я хочу открыть календарь, чтобы выбрать дату и время. Эта опция работает. Если я использую только элемент управления выбора даты - где я могу выбрать только даты - он не работает.

В следующем коде Datepicker работает так, как я хочу, без опции времени. У меня есть опция даты и времени, и она открывается только один раз, когда я нажимаю на изображение.

DatePicker: 

 $("#ImageDate").datepicker({
      dateFormat: 'mm/dd/yy',
      changeMonth: true,
      changeYear: true,
      showOn: 'button',
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});

Datetimepicker: 

$("#ImageDate1").datetimepicker({
       autoOpen: false,
       showOn: 'button',
       buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
       buttonImageOnly: true,
       format: 'm/d/Y H:i',
});

1 Ответ

2 голосов
/ 16 января 2020

Вам нужно активировать средство выбора даты при нажатии этого изображения. Вот пример, который может вам помочь ...

Js Код: 

$(function() {
  $('#startTime1Trigger').on('click', function(){
    var $t = $(this),
        $tp = $(this).parent().siblings('.timepicker').first();

    if ($tp.timepicker())
      $('#startTime1').timepicker('show');
  });
});

Html Код: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<label for="startTime1">* Proposed Start Time:</label>
<div class="input-group">
  <input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="startTime1" name="startTime1" placeholder="Start Time 1">
  <span class="input-group-addon">
        <i class="fa fa-arrow-down fa-fw" id="startTime1Trigger" aria-hidden="true"></i>
    </span>
</div>
...