拉拉式数据采集器

Question

在我的laravel项目中，我有两款(从到到 dates )。

当选择from date时，我希望禁用日期之前的，并让用户在选定的日期之后选择to date。

简单地说，from date是的早期日期，to date应该是较晚的日期。

以下是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]的功能。尽管我尝试过以多种方式使用I和类，但我失败了。我能知道我哪里出了问题吗？

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

我对编码很陌生。请帮帮忙。非常感谢。

Answer 1

您可以使用jQuery UI数据报警器，使用日期范围。在选择“您可以在下一个框中选择”之后:将"From“日期作为参数移动到next框，然后得到所需的限制。它易于使用，您可以在链接中看到完整的示例。

  $( 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;
 }
} );