Set specific date range in x-splade-input with flatpickr

[p4rad0xus]

• Laravel Version: 10.46.0
• PHP Version: 8.3.2
• Splade JS Version (npm): 1.4.16
• Splade PHP Version (composer): 1.4.16
• Dev environment (OS, Sail/Valet/etc): Herd

Description:

In a Blade file I use a x-splade-form to edit a Model. The Model contains an attribute named "start_date" and "end_date". This attributes contains a string with a date in the format "Y-m-d".
The information for this attributes comes from a x-splade-input date range field and will be separated.

To edit the date in the form I want also to use x-splade-input date range. But I don't know how to fill the input field with the informations of "start_date" and "end_date.
With the config option defaultDate on the date attribute I can set a date which would be shown, but the submitted form does contains instead a empty string.

Form to edit

<x-splade-form :default="$myModel">
    <x-splade-input name="name" />
    <x-splade-input name="date_range" date="{defaultDate: '{{ $myModel->start_date }} to {{ $myModel->end_date }}'}" range />
</x-splade-form>

[dusp2k]

I think you can access the data by using form.start_date and form.end_date. Just like you would use data.some_variabele in a <x-splade-data> tag

[p4rad0xus]

Thank you for your answer but I don't want to use the value from the input field in the form.
The field display the passing data on the website. If I submit the form and want to get the value of the field in the FormRequest class with $this->date_range its returns null.

Example
The Model $myModel contains the following values:

• name => "Model 1"
• start_date => "2023-03-05"
• end_date => "2023-03-10"

In the Blade file I use this form:

<x-splade-form :default="$myModel">
    <x-splade-input name="name" />
    <x-splade-input name="date_range" date="{defaultDate: '{{ $myModel->start_date }} to {{ $myModel->end_date }}'}" range />
</x-splade-form>

On the website I see the expected values also the DOM for the input field with the name attribute "date_range".

If the unchanged form is submitted the intended FormRequest class receive on $this->name the value "Model 1" and under $this->date_range the value null.

Only if the period is selected again do I receive a string in the FormRequest.

[ritwikBiswas007]

BRO BRO BRO I have cracked it. Here is how to do it

<?php

namespace  App\Tables;

  

use App\Models\Transaction;

use App\Models\User;

use Illuminate\Http\Request;

use ProtoneMedia\Splade\AbstractTable;

use ProtoneMedia\Splade\SpladeTable;

  

class  LedgerTable  extends  AbstractTable

{

protected $repquest;

/**

* Create a new instance.

*

* @return  void

*/

public  function  __construct(Request $request)

{

$this->request  = $request;

}

  

/**

* Determine if the user is authorized to perform bulk actions and exports.

*

* @return  bool

*/

public  function  authorize(Request $request)

{

  

return  true;

}

  

/**

* The resource or query builder.

*

* @return  mixed

*/

  

public  function  for()

{

  

$transaction  =  Transaction::query()->where('created_at', '>=', now()->subDays(7));

if (isset($this->request->date_range)) {

$date_range  =  explode(' to ',  $this->request->date_range);

// Format dates to Y-m-d for consistency

$startDate  =  date('Y-m-d',  strtotime($date_range[0]));

$endDate  =  count($date_range) ==  2  ?  date('Y-m-d',  strtotime($date_range[1])) : $startDate;

  

// Adjust the end date if it's the same as the start date

if ($startDate  === $endDate) {

// If they are the same, set the end date to the end of the day

$endDate  =  date('Y-m-d',  strtotime($endDate  .  ' +1 day'));

}

  

$transaction->whereDate('created_at', '>=', $startDate)

->whereDate('created_at', '<=', $endDate);

}

  

return $transaction;

}

  
  

/**

* Configure the given SpladeTable.

*

* @return  void

*/

public  function  configure(SpladeTable $table)

{

$table

->withGlobalSearch(columns: [

'id',

'api_txn_id',

'txn_no',

'pay_id',

'ref_no',

'option_1',

'option_2',

'option_3',

'option_4',

'user.name',

'status',

'user.email',

'provider.name',

'api.name',

'remark',

])

->column('provider_id', sortable: true, label: 'Provider', as: function ($provider_id, $transaction) {

return $transaction->provider->name;

})

->column('id')

->column(label: 'Reference')

->column(label: 'Opening')

->column(label: 'Amount')

->column(label: 'Charge')

->column(label: 'Closing')

->column('status')

->column('remark')

->column('created_at', sortable: true, as: fn ($created_at, $customer) => $created_at->format('d-m-Y H:i:s'))

->selectFilter(

'product',

label: 'Report Type',

options: ['payout'  =>  'Payout', 'fund_request'  =>  'Fund Request']

)

->selectFilter(

'user_id',

label: 'Select User',

options: auth()->user()->getRoleNames()[0] ==  'Super Admin'  ?  User::pluck('name', 'id')->toArray() :  User::where('id', auth()->id())->pluck('name', 'id')->toArray(),

defaultValue: auth()->id()

)

->defaultSort('id', 'desc')

->perPageOptions([50, 100, 200])

->export()

->paginate(8);

}

}

Table.php

@section('page-title', 'View Reports')

<x-main-layout>

<div  class="row mb-4">

<div  class="col-12 col-md-9 hidden md:block"></div>

<div  class="col-12 col-md-3">

<div  class="row">

<form  action="{{  route('reports.ledger')  }}"  method="GET">

<!-- Date Range Filter Input -->

<div  class="">

<label  for="date_range"  class="block font-medium text-sm text-gray-700 mb-2">Date

Range:</label>

<input  type="text"  id="date_range"  name="date_range"  class="form-control"

placeholder="Select date range"  autocomplete="off"  value="{{  request('date_range')  }}">

</div>

</form>

</div>

</div>

</div>

<x-splade-table  :for="$ledgers"  as="$ledger"  striped>

<x-splade-cell  reference>

<div  class="flex flex-col gap-1">

<p  class="m-0"><strong>Benificiary A/C No: </strong>{{ $ledger->option_1  }}</p>

<p  class="m-0"><strong>Benificiary IFSC Code: </strong>{{ $ledger->option_2  }}</p>

<p  class="m-0"><strong>Benificiary Bank: </strong>{{ $ledger->option_3  }}</p>

<p  class="m-0"><strong>Benificiary Name: </strong>{{ $ledger->option_4  }}</p>

</div>

</x-splade-cell>

<x-splade-cell  amount>

@if ($ledger->trans_type  ==  'credit')

<span  class="text-green-700">

<strong>+ {{ $ledger->amount  }}</strong>

</span>

@else

<span  class="text-red-700">

<strong> - {{ $ledger->amount  }}</strong>

</span>

@endif

</x-splade-cell>

<x-splade-cell  charge>

@if ($ledger->trans_type  ==  'credit')

<span  class="text-green-700">

<strong>+ {{ $ledger->charge  }}</strong>

</span>

@else

<span  class="text-red-700">

<strong> - {{ $ledger->charge  }}</strong>

</span>

@endif

</x-splade-cell>

<x-splade-cell  opening>

<span>

<strong>

{{ \App\Models\Transaction::where('id', '<', $ledger->id)->where('user_id',

$ledger->user_id)->orderBy('id', 'desc')->first()->balance ?? 0  }}

</strong>

</span>

</x-splade-cell>

<x-splade-cell  closing>

<span>

<strong>

{{ $ledger->balance  }}

</strong>

</span>

</x-splade-cell>

</x-splade-table>

<x-splade-script>

flatpickr("#date_range", {

mode: "range",

dateFormat: "Y-m-d",

onClose: function(selectedDates, dateStr, instance) {

instance.element.form.submit();

}

});

</x-splade-script>

</x-main-layout>

View.blade.php

Hope this will help everyone

Best Regards
Ritwik Biswas

Hope I will get some stars