laravel 中的日期选择器日期范围答案

【问题标题】：Date picker daterange in laravellaravel 中的日期选择器日期范围
【发布时间】：2020-10-05 16:24:57
【问题描述】：

在我的 laravel 项目中，我有两个日期选择器，其中包括 from 和 to 日期。

选择起始日期时，我想禁用起始日期之前的日期并让用户选择截止日期在从日期选择之后。

简而言之，从日期是较早的日期，到日期应该是较晚的日期。

这是blade.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] 的功能。尽管我尝试以多种方式使用 ids 和 classes，但我失败了。请问我哪里出错了。

我也想验证日期选择器。但是，datepicker 将默认日期作为当前日期。作为解决方案，我建议在输入任何日期之前将日期字段保持为空。我试过autoUpdateInput: false。当我将它添加到脚本时，尽管我从日期选择器中选择了一个日期，但日期字段仍为空。

我是编码新手。请帮忙。非常感谢。

【问题讨论】：

标签： php jquery laravel datepicker

【解决方案1】：

您可以使用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;
 }
} );

【讨论】：