TC
Twill CMS•2y ago
kerkness

DatePicker not updating or incorrectly updating field

Having a weird issue with the DatePicker field which seems to have popped up in the last few weeks or so (project is still in development so not sure exactly when it started happening). DatePicker was working previously. Running 3.0.1 and I have ran twill:update Two issues appear to be happening. 1) If I enter a date into the field then field saves as the previous day. Example, if I enter "May 15, 2023" the payload sent to twill submits "2023-05-15" but the value saved into the database is "2023-05-14" 2) If I select a date from the DatePicker popup then the payload is not updated unless I hit the "enter key". Removing focus from the field does not update the payload. The module has the following migrations: 
$table->date('start_date')->nullable();
$table->date('end_date')->nullable();
$table->date('start_date')->nullable();
$table->date('end_date')->nullable();
(These are not publish dates, they meant to show the start and end dates of an event.) The model casts these fields to date and also includes $dates as the docs seem to suggest. Although I'm pretty sure having both is redundant. 
public $casts = [
   'start_date' => 'date',
   'end_date' => 'date',
];

public $dates = ['start_date', 'end_date'];
public $casts = [
   'start_date' => 'date',
   'end_date' => 'date',
];

public $dates = ['start_date', 'end_date'];
The controller uses getForm method and adds fields with the following 
$form->add(
    Columns::make()
        ->left(
            [DatePicker::make()
                ->name('start_date')
                ->allowInput(true)
                ->withoutTime(true)
                ->allowClear(true)]
        )
        ->right(
            [DatePicker::make()
                ->name('end_date')
                ->allowInput(true)
                ->withoutTime(true)
                ->allowClear(true)]
        )
);
$form->add(
    Columns::make()
        ->left(
            [DatePicker::make()
                ->name('start_date')
                ->allowInput(true)
                ->withoutTime(true)
                ->allowClear(true)]
        )
        ->right(
            [DatePicker::make()
                ->name('end_date')
                ->allowInput(true)
                ->withoutTime(true)
                ->allowClear(true)]
        )
);
7 Replies
ifox
ifox•2y ago
Hi @kerkness $dates has been deprecated by Laravel in v10 https://laravel.com/docs/10.x/upgrade#model-dates-property
kerkness
kerknessOP•2y ago
Hi @ifox.dev I didn't know it was deprecated but had only added $dates as that was mentioned in the twill docs. Regardless without $dates the field still behaves the same. With further testing both issues I'm seeing appear perhaps unrelated.
1) The vue component for the field does not submit field changes unless enter key hit. I don't really use vue as my experience is with react, but it would appear that the field component is not updating the form state with the onblur event. 2) When a date change is submitted the backend is saving the previous day. This is likely because I'm using withoutTime(true) and the backend is adding a time before saving the date and perhaps locale timezone is messing things up somehow. I need to do more testing and dive into the twill code to see what is going wrong but it's a long weekend here in Canada. I can't see anything else from my setup/usage that would be messing things up. I managed to do some further testing. There appears to be a few bugs with the VUE component for DatePicker .
If you use withoutTime(true) the component allows you to select a new date however that date is not sent with the payload when the module is saved/updated.
The option time24h when set to false (default) displays the wrong day when time is 00:00:00 The option is also documented as time24Hr(true) and uses the variable $time24Hr inside DatePicker and TimePicker however the actual method to set this option is public function time24h leading to some confusion. Either the documentation needs updated or the option. I can submit a bug report
constantvariable.
constantvariable.•2y ago
Hello, yes same problem here if the withTime option is set to false. In other words, it actually only works for SQL data of type DATETIME, not DATE
Sami
Sami•2y ago
I wish this issue was long gone. It already caused me so many headaches @ifox.dev is there any update or workaround for this? In before I used a patch from here https://discord.com/channels/811936425858695198/989876822323908608/1042442401245044836, but it does not work anymore (composer won't install it)
ifox
ifox•2y ago
Which problem exactly do you mean? That patch has been merged, its in twill 3, so I'm not following.
Sami
Sami•2y ago
When using datepickers without time in repeaters, the date still doesn't work properly (v3.0.2)
T
T•2y ago
I dont know about repeaters but I set up a date only field and tried using the datepicker without time and I get issues. I click the date box, pick a date and it doesnt fill it in. I then click it again and pick a date again and then it does fill in (correctly, without the time) and then when i hit update, the date goes over as null in the payload. If I change to with time then it produces an ISO8601 date time string but then there are issues saving it (3.0.2) #🔮twill-3

Did you find this page helpful?