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.

$today = new Carbon;
$cal = DateRangePickerHelper::init(
  'singlecalendar', //object id
  $today, // init date start
  $today, // init date end
  null, // inferior date limit (min. date)
  null, // superior date limit (max. date)
    'singleDatePicker' => true, // calendar is not double
    'drops' => 'down', // calendat opens below
    'formlabel' => 'Date:', // calendar label in form
    'usehiddeninputs' => false, // dates shall be copied in form fields manually
    'timePicker' => true, // hour + minutes
    'apply.daterangepicker' => //copy selected date 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
      "\$('#datesingle').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));";

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


 7/15/2024 03:43 PM

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