时间戳

首页 > 解决方案 > laravel 中的日期选择器日期范围

php - laravel 中的日期选择器日期范围

问题描述

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

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

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

这是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。当我将它添加到脚本时，尽管我从日期选择器中选择了一个日期，但日期字段仍为空。

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

标签： phpjquerylaraveldatepicker

解决方案

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

推荐阅读