DateRangePicker (current version: 3.1.0) is a great Javascript library to build a calendar and select a date or date range. Package DateRangePickerHelper (current version: 2.5.1) provides helpers to facilitate calendar settings and date retrieval. Project on GitHub. Project on Packagist. This demosite sources available here.

In your controller create an instance of DateRangePickerHelper and pass the variable to the view.

$start = new Carbon('6 days ago');
$end = new Carbon;
$cal2 = DateRangePickerHelper::init(
  'logCal2', //object id
  $start, // init date start
  $end, // init date end
  null, // inferior date limit (min. date)
  $end, // superior date limit (max. date)
    'formlabel' => 'Dates:', // calendar label in form
    'timePicker' => true, // hour + minutes
    'drops' => 'down', // calendat opens below
    'usehiddeninputs' => false, // dates shall be copied in form fields manually
    'apply.daterangepicker' => //copy selected dates after "apply" button is clicked.
      // here element 'datesingle' is field where selected date is copied.
      // picker is js calendar object. Format is Moment.js formatting code
      "\$('#datestart').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));"
       . "$('#dateend').val(picker.endDate.format('YYYY-MM-DD HH:mm:ss'));";

Then print your paginator by inserting {!! cal !!} in your template.


 5/22/2024 07:11 AM - 5/28/2024 07:11 AM

Here dates are copied into visible fields defined in `apply.daterangepicker` function.