How to start the resource without any value on this filter by default?

What do you mean by without any value ? Do you want the filter input to be blank or do you want the default value to ne bull ? I have come to a solution to set default value to "All time" and change the filter to be blank if it is default value.

You have to add the ALL_TIME in the DateHelper:

diff --git a/src/DateHelper.php b/src/DateHelper.php
index 9ef97ff..70680ad 100644
--- a/src/DateHelper.php
+++ b/src/DateHelper.php
@@ -7,27 +7,29 @@ use Illuminate\Support\Carbon;

     public const THIS_YEAR = 'This year';
+
+    public const ALL_TIME = 'All time';

     public static function defaultRanges(): array
     {
@@ -39,6 +41,7 @@ class DateHelper
             self::THIS_MONTH => [Carbon::today()->startOfMonth(), Carbon::today()],
             self::LAST_MONTH => [Carbon::today()->subMonth()->startOfMonth(), Carbon::today()->subMonth()->endOfMonth()],
             self::THIS_YEAR => [Carbon::today()->startOfYear(), Carbon::today()],
+            self::ALL_TIME => [Carbon::parse('1970-01-01'), Carbon::today()],
         ];
     }

@@ -48,6 +51,9 @@ class DateHelper
         $end = $start->clone();

         switch ($value) {
+            case self::ALL_TIME:
+                $start = Carbon::parse('1970-01-01');
+                break;
             case self::TODAY:
                 break;
             case self::YESTERDAY:
@@ -103,3 +109,4 @@ class DateHelper
         ];
     }
 }

Also, in Dateranepicker set ALL_TIME to be the default (I also add some changes to set the filter name:

 diff --git a/src/Daterangepicker.php b/src/Daterangepicker.php
index e549898..0cbb2fb 100644
--- a/src/Daterangepicker.php
+++ b/src/Daterangepicker.php
@@ -4,6 +4,7 @@ namespace Rpj\Daterangepicker;

 use Carbon\Carbon;
 use Exception;
+use Illuminate\Support\Str;
 use Laravel\Nova\Filters\Filter;
 use Laravel\Nova\Http\Requests\NovaRequest;
 use Rpj\Daterangepicker\DateHelper as Helper;
@@ -16,12 +17,15 @@ class Daterangepicker extends Filter

     public function __construct(
         private string $column,
-        private string $default = Helper::TODAY,
+        private string $default = Helper::ALL_TIME,
         private string $orderByColumn = 'id',
         private string $orderByDir = 'asc',
     ) {
-        //Often date range components use as default date the past dates
-        $this->maxDate = Carbon::today();
+        $this->setName($this->column ? Str::replace('_', ' ', Str::title($this->column)) : '');
+
+        $this->setMaxDate(Carbon::today());
+
+        $this->setMinDate(Carbon::parse('1970-01-01'));
     }

     /**
@@ -76,6 +80,16 @@ class Daterangepicker extends Filter
         return $start->format('Y-m-d').' to '.$end->format('Y-m-d');
     }

+    /**
+     * Get the key for the filter.
+     *
+     * @return string
+     */
+    public function key()
+    {
+        return $this->column;
+    }
+
     public function setMinDate(Carbon $minDate): self
     {
         $this->minDate = $minDate;
@@ -115,6 +129,19 @@ class Daterangepicker extends Filter
         return $this;
     }

+    /**
+     * Set the filter name.
+     *
+     * @param string $name
+     * @return void
+     */
+    public function setName(string $name)
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
     /**
      * Convert the filter to its JSON representation.
      *
@@ -128,3 +155,4 @@ class Daterangepicker extends Filter
         ]);
     }
 }

Then in the Vue component, you'll have to check if it is the default value, and in that case, clear the filter so that the input field will appears empty. Also, if it's not the default value I explicitly set the value variable so that the cross icon to clear filter will appear.

diff --git a/resources/js/components/Filter.vue b/resources/js/components/Filter.vue
index b491782..5787af9 100644
--- a/resources/js/components/Filter.vue
+++ b/resources/js/components/Filter.vue
@@ -2,11 +2,11 @@
     <FilterContainer>
         <span>{{ filter.name }}</span>
         <template #filter>
-            <div class="relative">
+            <div class="flex">
                 <input type="text" class="hidden" />
                 <input
                     :id="id"
-                    class="block w-full form-control form-control-sm form-input form-input-bordered text-sm px-1"
+                    class="block form-control form-control-sm form-input form-input-bordered text-sm px-1"
                     :class="{ 'text-white': value == null }"
                     type="text"
                     :dusk="`${filter.name}-daterange-filter`"
@@ -17,7 +17,7 @@
                     @keydown="handleInput($event)"
                     @paste.prevent
                 />
-                <div v-if="value" class="absolute top-0 right-0 mt-1 mr-1">
+                <div v-if="value" style="margin-top: 6px">
                     <button class="bg-transparent" @click="clearFilter">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -152,30 +158,41 @@ export default {
                            " to " +
                            ref.currentEndDate.format("MM/DD/YYYY");
                    }
                });

+           if (
+               ref.startDate == "01/01/1970" &&
+               ref.endDate == moment().format("MM/DD/YYYY")
+           ) {
+               this.clearFilter();
+           }
         },
         clearFilter: function () {
             this.value = null;

rodrigopaco1986 / simple-daterange-picker

How to start the resource without any value on this filter by default? #5