I am working with the date picker (pikaday) example from surge. I tried to change it to use YYYY-MM-DD format and it is behaving weird. Every time the date picker shows up, it goes back one day. If the input is 2020-08-01 and I select it, the date changes to 2020-07-31.
I added some console logs to see what was happening. When pikaday displays, it generates a change event with the previous day of what it was set to.
Steps to Reproduce:
Change the surge pikaday component to use YYYY-MM-DD
Are you using the latest version of Livewire:
2.3.0
Do you have any screenshots or code examples:
code/resources/views/livewire/experiments/date-picker.blade.php
<div
x-data="{ value: @entangle('date'), picker: undefined }"
{{-- format: 'MM/DD/YYYY', --}}
x-init="new Pikaday({ field: $refs.input, onOpen() { this.setDate($refs.input.value) } })"
x-on:change="value = $event.target.value"
>
<input
x-bind:value="value"
x-ref="input"
type="text"
{{-- placeholder="MM/DD/YYYY" --}}
>
</div>
And the PHP code:
namespace App\Http\Livewire\Experiments;
use Livewire\Component;
use Illuminate\Support\Facades\Redis;
use Illuminate\Support\Facades\Log;
use Carbon\Carbon;
class DatePicker extends Component
{
public $date;
protected $rules = [
'date' => 'sometimes'
];
const REDIS_KEY = 'experiment:date';
const DATE_FORMAT = 'Y-m-d'; //'m/d/Y'
public function mount()
{
$rawDate = Redis::get(self::REDIS_KEY);
Log::debug("Read date {$rawDate}");
$this->date = ($rawDate) ? Carbon::parse($rawDate)->format(self::DATE_FORMAT) : Carbon::now()->format(self::DATE_FORMAT) ;
}
public function updatedDate()
{
Log::debug(__METHOD__ . ' ' .print_r($this->date, true));
$stdDate = Carbon::parse($this->date)->format('Y-m-d'); // this is the storage format regardless of what it looks like on the page
Log::debug("Storing date {$stdDate}");
Redis::set(self::REDIS_KEY, $stdDate);
}
public function render()
{
return view('livewire.experiments.date-picker');
}
}