Диапазон дат выбора даты в laravel - PullRequest
Новая
       15

Диапазон дат выбора даты в laravel

0 голосов
/ 16 июня 2020

В моем проекте laravel у меня есть два datepickers, которые включают даты от и до .

Когда from date selected, я хочу отключить даты до даты начала и позволить пользователю выбрать до даты после даты, выбранной с даты.

Вкратце, от даты раньше и до должно быть более поздней даты.

Вот код в лезвии. php

<div class="form-group">
<i class="fa fa-calendar"></i><label for="date">From:</label><input type="text" class="datefrom" id="datefrom" name="datefrom" value="{{ old('datefrom') }}" />
<i class="fa fa-calendar"></i><label for="date">To:</label><input type="text" class="dateto" id="dateto" name="dateto" value="{{ old('dateto') }}" />
</div>

<script>
$(function() {
  $('.datefrom').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1985,
    autoUpdateInput: false,
    maxDate: new Date,
    maxYear: parseInt(moment().format('YYYY'),10),
    locale: {
                format: 'DD-MM-YYYY'
            } 
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
  },

    $('.dateto').datepicker(
            "change", {
            minDate: new Date($('.datefrom').val())
        });
});

$(function() {
  $('.dateto').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1985,
    autoUpdateInput: false,
    maxDate: new Date,
    maxYear: parseInt(moment().format('YYYY'),10),
    locale: {
                format: 'DD-MM-YYYY'
            } 
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
  },

   $('.datefrom').datepicker(
            "change", {
            maxDate: new Date($('.dateto').val())
        });
  });
</script>

Мне нужна функциональность [http://jsfiddle.net/jjLhca9o/5/] [1] . Хотя я пытался использовать идентификаторы и классы разными способами, у меня ничего не вышло. Могу ли я узнать, где я ошибся?

Я также хочу проверить средство выбора даты. Но datepicker принимает дату по умолчанию как текущую дату. В качестве решения я предложил оставить поле даты пустым перед вводом любой даты. Пробовал с autoUpdateInput: false. Когда я добавляю его в сценарий, поле даты остается пустым, хотя я выбрал дату в средстве выбора даты.

Я новичок в кодировании. Пожалуйста помоги. Большое спасибо.

1 Ответ

0 голосов
/ 16 июня 2020

Вы можете использовать jQuery UI Datepicker , используя диапазон дат. После выбора «From» вы можете выбрать в следующем поле «To»: дата «From» перемещается в качестве параметра в следующее поле, и вы получаете желаемые ограничения. Он прост в использовании, и вы можете увидеть полный пример по ссылке. 

  $( function() {
var dateFormat = "mm/dd/yy",
  from = $( "#from" )
    .datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3
    })
    .on( "change", function() {
       //Here we get the date and set as 'minDate' and update for next selection
      to.datepicker( "option", "minDate", getDate( this ) );
    }),
  to = $( "#to" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3
  })
  .on( "change", function() {
    //Using 'to' box we set end limit, so 'to' box will be limited.
    from.datepicker( "option", "maxDate", getDate( this ) );
  });

//using that function you can get the range user picked
function getDate( element ) {
  var date;
  try {
    date = $.datepicker.parseDate( dateFormat, element.value );
  } catch( error ) {
    date = null;
  }

  return date;
 }
} );
...