[Bug] field date_range select ranges invalid date

[adriallongarriu]

Bug report

What I did

Use ranges options in a date_range. I wanted the same options as a filter an copy the seme config as vendor\backpack\pro\resources\views\filters\date_range.blade.php

My code:

$this->crud->field([
                'name'  => 'start_date,end_date',
                'label' => 'Event Date Range',
                'type'  => 'date_range',
                'date_range_options' => [
                    'alwaysShowCalendars' => true,
                    'ranges' => [
                        trans('backpack::crud.today') =>  [Carbon::now()->startOfDay()->toDateTimeString(), Carbon::now()->endOfDay()->toDateTimeString()],
                        trans('backpack::crud.yesterday') => [Carbon::now()->subDay()->startOfDay()->toDateTimeString(), Carbon::now()->subDay()->endOfDay()->toDateTimeString()],
                        trans('backpack::crud.last_7_days') => [Carbon::now()->subDays(6)->startOfDay()->toDateTimeString(), Carbon::now()->toDateTimeString()],
                        trans('backpack::crud.last_30_days') => [Carbon::now()->subDays(29)->startOfDay()->toDateTimeString(), Carbon::now()->toDateTimeString()],
                        trans('backpack::crud.this_month') => [Carbon::now()->startOfMonth()->toDateTimeString(), Carbon::now()->endOfMonth()->toDateTimeString()],
                        trans('backpack::crud.last_month') => [Carbon::now()->subMonth()->startOfMonth()->toDateTimeString(), Carbon::now()->subMonth()->endOfMonth()->toDateTimeString()]
                    ],
                    'locale' => [
                        'firstDay' => 1,
                        'format' => config('backpack.base.default_date_format'),
                        'applyLabel'=> trans('backpack::crud.apply'),
                        'cancelLabel'=> trans('backpack::crud.cancel'),
                        'customRangeLabel' => trans('backpack::crud.custom_range')
                    ]
                ]
            ]);

What I expected to happen

Be able to select a predefined date range

What happened

On clicking any range the date is invalid and it's impossible to select any date

What I've already tried to fix it

• First the key config('backpack.base.default_date_format') is invalid for backpack v6. The key was changed to file ui.
• Second after debuging the code i compared to the filters blade i found there are trasnforming the ranges to moment but in the fields blade not.

I override the date_range.blade.php and add the folowing code:

$ranges = $configuration.ranges;
$configuration.ranges = {};

  //if developer configured ranges we convert it to moment() dates.
  for (var key in $ranges) {
      if ($ranges.hasOwnProperty(key)) {
          $configuration.ranges[key] = $.map($ranges[key], function($val) {
              return moment($val);
          });
      }
  }

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there? YES

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

[karandatwani92]

Hey @adriallongarriu

The problem was the format.

I created ranges with the following format:

CRUD::field([
   'name'  => 'start_date,end_date',
   'label' => 'Event Date Range',
   'type'  => 'date_range',
   'date_range_options' => [
     'ranges' => [
         trans('backpack::crud.today') => [\Carbon\Carbon::now()->startOfDay()->format('m/d/Y'), \Carbon\Carbon::now()->startOfDay()->format('m/d/Y')],
         trans('backpack::crud.yesterday') => [\Carbon\Carbon::now()->subDay()->startOfDay()->format('m/d/Y'), \Carbon\Carbon::now()->subDay()->endOfDay()->format('m/d/Y')],
      ]
   ]
]);

[adriallongarriu]

Hey @adriallongarriu

The problem was the format.

I created ranges with the following format:

CRUD::field([
   'name'  => 'start_date,end_date',
   'label' => 'Event Date Range',
   'type'  => 'date_range',
   'date_range_options' => [
     'ranges' => [
         trans('backpack::crud.today') => [\Carbon\Carbon::now()->startOfDay()->format('m/d/Y'), \Carbon\Carbon::now()->startOfDay()->format('m/d/Y')],
         trans('backpack::crud.yesterday') => [\Carbon\Carbon::now()->subDay()->startOfDay()->format('m/d/Y'), \Carbon\Carbon::now()->subDay()->endOfDay()->format('m/d/Y')],
      ]
   ]
]);

Tested and it works but i don't undestend why. Why need this specified date format and why in the filters\date_range.blade.php is using other format.

I checked https://www.daterangepicker.com/ and not specified a format. And is using moment().

I think the correct solution would be to implement the same change that exists in filters\date_range.blade.php and transform the dates to moment(). It does not imply a new dependency because it is already being used inside backpack and it will be more robust as it works with more date formats.

[adriallongarriu]

@pxpm could you take a look at this issue. I believe it's a bug and the correct solution will be implementing the same change as it is done in the \filters\date_range.blade.php and transform the dates to moment js. Plus the translation is still the wrong.

I would have made a pull request but this file is in the pro

[pxpm]

Hey @adriallongarriu hope to find you well 🙏

Thanks for the ping, and sorry for the delay, we have been super busy adding Laravel 11 support to all our packages.

I've released PRO 2.1.11 with the fix, let me know if you are still experiencing issues 🙏

Cheers