Выбор даты начала и конца даты запроса - PullRequest
Новая
       9

Выбор даты начала и конца даты запроса

0 голосов
/ 04 мая 2018

У меня есть 2 выбора даты (значит, применяется 2 раза), если я выбрал определенную дату из первого выбора даты (т.е. даты начала), то 2-й выбор даты отключит все те даты, которые меньше даты начала. 

//Date picker
$('.datepicker').datepicker({

  format: "yyyy/mm/dd",

});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-sm-12">

  <div class="col-sm-6 pull-left">
    From: <input type="text" name="reg_start_date" class="datepicker" size="15" />
  </div>
  <div class="col-sm-6 pull-left">
    To: <input type="text" name="reg_end_date" class="datepicker" size="15" />
  </div>
</div>

Обновлен: 

   <script>
<?= $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js','https://code.jquery.com/ui/1.11.4/jquery-ui.min.js','bootstrap/js/bootstrap.min.js','https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js','plugins/select2/select2.full.min.js','plugins/input-mask/jquery.inputmask.js','plugins/input-mask/jquery.inputmask.date.extensions.js','plugins/input-mask/jquery.inputmask.extensions.js','plugins/daterangepicker/moment.js','https://code.jquery.com/ui/1.11.4/jquery-ui.min.js', 'plugins/sparkline/jquery.sparkline.min.js', 'plugins/jvectormap/jquery-jvectormap-1.2.2.min.js', 'plugins/jvectormap/jquery-jvectormap-world-mill-en.js','plugins/knob/jquery.knob.js','plugins/daterangepicker/daterangepicker.js','plugins/datepicker/bootstrap-datepicker.js','plugins/slimScroll/jquery.slimscroll.min.js', 'plugins/fastclick/fastclick.min.js','dist/js/app.min.js','dist/js/demo.js','plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.js')); ?>


      $(function () {
       $('.second').datepicker({
            format: "yy/mm/dd" 
        });

        $('.first').datepicker({
          format: "yy/mm/dd",
          onSelect: function(date) {
            alert('124');
            var date1 = $('.first').datepicker('getDate');
            var date = new Date(Date.parse(date1));
            date.setDate(date.getDate() + 1);
            var newDate = date.toDateString();
            newDate = new Date(Date.parse(newDate));
            $('.second').datepicker("option", "minDate", newDate);
          }
        });

      });

    </script>

Ответы [ 3 ]

0 голосов
/ 04 мая 2018

Вы можете добавить дополнительный класс в 1-м и 2-м текстовом поле и присвоить minDate второму текстовому полю, когда первое текстовое поле выделено с помощью onSelect. 

$('.second').datepicker({
    dateFormat: "yy/mm/dd" 
});

$(".first").datepicker({
  dateFormat: "yy/mm/dd",
  onSelect: function(date) {
    var date1 = $('.first').datepicker('getDate');
    var date = new Date(Date.parse(date1));
    date.setDate(date.getDate() + 1);
    var newDate = date.toDateString();
    newDate = new Date(Date.parse(newDate));
    $('.second').datepicker("option", "minDate", newDate);
  }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-sm-12">

  <div class="col-sm-6 pull-left">
    From: <input type="text" name="reg_start_date" class="datepicker first" size="15" />
  </div>
  <div class="col-sm-6 pull-left">
    To: <input type="text" name="reg_end_date" class="datepicker second" size="15" />
  </div>
</div>
0 голосов
/ 04 мая 2018

Вам нужно будет добавить прослушиватель к первому датчику (начало), который обновлял minDate второго (конец) при каждом изменении

Примерно так: 

var $start = $('[name="reg_start_date"]');
var $end = $('[name="reg_end_date"]');

$('.datepicker').datepicker({
  format: 'yyyy/mm/dd'
});

$start.datepicker('option', 'onClose', function(date) {
  $end.datepicker('option', 'minDate', date);
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-sm-12">

  <div class="col-sm-6 pull-left">
    From: <input type="text" name="reg_start_date" class="datepicker" size="15" />
  </div>
  <div class="col-sm-6 pull-left">
    To: <input type="text" name="reg_end_date" class="datepicker" size="15" />
  </div>
</div>
0 голосов
/ 04 мая 2018

Вы должны создать слушателя на reg_start_date. Если содержимое изменяется, указатель даты для
reg_end_date должен быть установлен с 

$("#reg_end_date").datepicker({ minDate: new Date(/*date from reg_start_date*/) });
...