Как использовать Boostrap DateRangePicker со скрытым полем и кнопкой для выбора даты - PullRequest
Новая
       38

Как использовать Boostrap DateRangePicker со скрытым полем и кнопкой для выбора даты

0 голосов
/ 09 апреля 2020

ОБНОВЛЕНИЕ:

Хорошо, поэтому после прочтения события jquery on () я обнаружил его. Проблема в том, что вы должны дважды щелкнуть, чтобы показать. Как я могу сделать так, чтобы пользователь просто щелкал в появившемся окне? 

/// Added this to show on click. 

    $('div.showDate').on('click',function(picker){
         $('input.date_range').focus();
     });

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

 .hideme
 {

     visibility:hidden;
 }
 .showme
 {
     display:inline;
     visibility:visible;
 }

 .dateShowing{
   position: relative;
   top: 50px;

 }

Ниже было оригинально?

В настоящее время у меня установлена ​​bootstrap DateRangePicker и работа над моей страницей. Это будет искать мою базу данных и покажет даты, выбранные пользователем. У меня проблема в том, что после перезагрузки страницы дата показывает сегодняшнюю дату вместо выбранной. Поэтому я подумал, что нужно скрыть ввод dateRange, а затем кнопку, чтобы показать сборщик. Таким образом, это не смущает пользователей. Или, если кто-нибудь знает способ поместить выбранную дату в коробку, это тоже было бы здорово. 

  <form id="dateForm">
    <div class="form-row align-items-center">
      <div class="col-auto">
        <div class="input-group">
          <div class="input-group-prepend date_range">
            <div class="input-group-text dateButton">
              <i class="fa fa-calendar date_range dateButton"></i>
            </div>
          </div>
          <input type="hidden" name="datemin">
          <input type="hidden" name="datemax">
          <input type="text" class="form-control mb-2 date_range" id="inlineFormInput" placeholder="onchange()" size="25" aria-label="date" aria-describedby="basic-addon1">
        </div>
      </div>
      <div class="col-auto">
        <button name="submit" type="submit" class="btn btn-primary dateSubmit">Filter Date</button>
      </div>
  </div>
</form>


  <script>
  $('input.date_range').daterangepicker({
    "alwaysShowCalendars": true,
    "showDropdowns": true,
    autoApply:true,
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
   },
   });


   $('input.date_range').change(function (picker) {
       [startDate, endDate] = $(this).val().split(' - ');
       $('#dateForm').find('input[name="datemin"]').val(startDate);
       $('#dateForm').find('input[name="datemax"]').val(endDate);
       $('.dateSubmit').trigger('click');

   });

   $('div.dateButton').on('click',function(picker){
        $('input.date_range').focus();
    });


  // $("input.date_range").change(function() {
  //    console.log($("input.date_range").val());
  //    $('form').delay(200).submit();
  // });


  </script>

Прямо сейчас у меня есть поле выше, чтобы показать выбранную дату. 

    <div class="form-row align-items-center">
      <div class="col-auto">
        <label for="ex2"><b>Showing Dates:</b></label>
        <div class="input-group">
          <div class="input-group-prepend date_range">
            <div class="input-group-text">
              <i class="fa fa-calendar date_range"></i>
            </div>
          </div>
          <input type="hidden" name="datemin">
          <input type="hidden" name="datemax">

          <input class="form-control mb-2 Date_Range" colspan="20" width="20px" type="text" name="date" value="<?php echo $mindate . " - " .$maxdate; ?>" placeholder="<?php echo date('m/d/Y h:i'); ?>" readonly>
        </div>
      </div>

  </div>

Моя цель состоит в том, чтобы либо последний код был обрезан с помощью кнопки календаря, которая может выбрать и затем отправьте запрос.

Я нашел этот скрипт здесь от другого пользователя и заставил его работать с моим проектом.
Спасибо за помощь

Ожидаемый результат: чтобы кнопка была добавлена ​​в поле, которое отключено и затем, когда пользователь выбирает диапазон дат, он автоматически отправляет, как он это делает в настоящее время. Я предполагаю, что у меня есть другой скрытый ввод, в который вкладывается указатель даты.

РЕДАКТИРОВАТЬ: Этот код будет анализировать представленные данные и форматировать их в структуре БД 

      if(!isset($_GET['datemin'])){

      $query_date = date("Y/m/d");

            // First day of the month.
      $mindate = date("Y-m-j", strtotime("first day of previous month"));

            // Last day of the month.
      $maxdate = date('Y-m-j', strtotime("last day of previous month"));
      }else{


      $date = new DateTime($_GET['datemin']);
      $mindate = $date->format('Y-m-j');

      $date = new DateTime($_GET['datemax']);
      $maxdate = $date->format('Y-m-j');

      }

Не знаю, если это необходимо, но вот оно.

...