Используя DateRangePicker, как применить таймер только на один день? - PullRequest
Новая
       10

Используя DateRangePicker, как применить таймер только на один день?

0 голосов
/ 06 июля 2018

Я создал одну демонстрацию, используя daterangepicker, и она работает нормально. Теперь я хочу применить средство выбора времени также с помощью DaterangePicker. Но я хочу время выбора только на один день. Когда пользователь выбирает дату из календаря и выбирает диапазон дат, выбирает начальную и конечную дату, а средство выбора времени автоматически скрывается из календаря. Например: пользователь выбирает с 06-07-2018 по 07-07-2018 или с 06-07-2018 по 10-07-2018, затем таймер хочет скрыть. Пользователь выбирает один день от начала до конца, а затем показ времени. Например: пользователь выбирает с 06-07-2018 по 06-07-2018, а затем показывает время выбора. У меня есть сейчас вручную инициализировать время выбора с помощью css вручную скрыть.

Это мой HTML-код: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
  <style type="text/css">
  .daterangepicker .left .calendar-time{
   display:none !important;
  }
  .daterangepicker .right .calendar-time
   {
    display:none !important;
   }
</style>


<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div>
    <input type="text" id="dates" name="dates" value="" />
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript">
    $(function () {            
        $('input[name="dates"]').daterangepicker({
            minDate: new Date(),
            timePicker: true,
       });       
       });       
</script>

Прямо сейчас мое шоу по сбору даты выглядит так:

enter image description here

После того, как у меня есть правильный css, который я дал выше в теге head, тогда указатель выбора даты в это время не показывается в первый раз.

Использование css Мой сборщик дат выглядит так:

enter image description here

В приведенном выше скриншоте у меня таймер выбора.

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

Я хочу это по щелчку мыши.

Кто-нибудь знает, как это сделать. как получить даты по клику мыши.

Например: пользователь выбирает с 06-07-2018 по 06-07-2018, а затем показывает время выбора Пользователь выбирает даты с 06-07-2018 по 07-07-2018, а затем таймер.

...