Filament•16mo ago

Date/Time Picker Required

When adding a DatePicker or DateTime Picker to a form (a form on a Livewire component), the ->required() option isn't ensuring the field is filled out. The user can still submit the form and null is submitted on the back end. Having a similar but worse issue with the Flatpickr plugin (which is why we went back tothe base component) where it always submits null no matter if you pick a date/time or not. Thanks for any insight!

10 Replies

Lara Zeus•16mo ago

can you share the code? did.a quick test

DatePicker::make('date')
                    ->native(false)
                    ->required(),

DatePicker::make('date')
                    ->native(false)
                    ->required(),

this works fine even without the native part

Lara Zeus•16mo ago

ah just noticed the "(a form on a Livewire component)" 😅 I was testing in a panle check 'fillable' in the model! or ->fil(0 in mount?

ShavikOP•16mo ago

So I have the models unguarded Going to post the whole component.

<?php

namespace App\Livewire\Comments;

use Coolsam\FilamentFlatpickr\Forms\Components\Flatpickr;
use Filament\Forms;
use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Database\Eloquent\Model;
use Livewire\Component;
use Illuminate\Contracts\View\View;
use Spatie\Comments\Models\Comment;
use Filament\Forms\Get;

class CreateComment extends Component implements HasForms
{
    use InteractsWithForms;

    public ?Model $record = null;
    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Textarea::make('message')
                    ->label('Leave a comment')
                    ->required()
                    ->rows(3),
                Forms\Components\DateTimePicker::make('test_field')->required()->rule('required'),
                Forms\Components\Section::make('notification')
                    ->schema([
                        Forms\Components\Checkbox::make('notify')
                            ->label('Notify me')
                            ->live(),
                        Forms\Components\DateTimePicker::make('notify_me_at')
                            // ->hidden(fn(Get $get): bool => !$get('notify'))
                            // ->required(fn (Get $get): bool => filled($get('notify')))
                            ->required()
                           // ->enableTime()
                        ,
                    ])
                    ->columns(1),

            ])
            ->statePath('data')
            ->model(Comment::class);
    }

    public function create(): void
    {
        // Caught by Comments widget to persist the data
        dd($this->data);
        $this->dispatch('create-comment', $this->data['message']);
        $this->data['message'] = '';
    }

    public function render(): View
    {
        return view('livewire.comments.create-comment');
    }
}

<?php

namespace App\Livewire\Comments;

use Coolsam\FilamentFlatpickr\Forms\Components\Flatpickr;
use Filament\Forms;
use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Database\Eloquent\Model;
use Livewire\Component;
use Illuminate\Contracts\View\View;
use Spatie\Comments\Models\Comment;
use Filament\Forms\Get;

class CreateComment extends Component implements HasForms
{
    use InteractsWithForms;

    public ?Model $record = null;
    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Textarea::make('message')
                    ->label('Leave a comment')
                    ->required()
                    ->rows(3),
                Forms\Components\DateTimePicker::make('test_field')->required()->rule('required'),
                Forms\Components\Section::make('notification')
                    ->schema([
                        Forms\Components\Checkbox::make('notify')
                            ->label('Notify me')
                            ->live(),
                        Forms\Components\DateTimePicker::make('notify_me_at')
                            // ->hidden(fn(Get $get): bool => !$get('notify'))
                            // ->required(fn (Get $get): bool => filled($get('notify')))
                            ->required()
                           // ->enableTime()
                        ,
                    ])
                    ->columns(1),

            ])
            ->statePath('data')
            ->model(Comment::class);
    }

    public function create(): void
    {
        // Caught by Comments widget to persist the data
        dd($this->data);
        $this->dispatch('create-comment', $this->data['message']);
        $this->data['message'] = '';
    }

    public function render(): View
    {
        return view('livewire.comments.create-comment');
    }
}

Relevant part:

Forms\Components\DateTimePicker::make('test_field')->required()->rule('required'),

Forms\Components\DateTimePicker::make('test_field')->required()->rule('required'),

I have tried just required and also the ->rule('required') I do have

    public function mount(): void
    {
        $this->form->fill();
    }

    public function mount(): void
    {
        $this->form->fill();
    }

Lara Zeus•16mo ago

try dd($this->form->getState());

ShavikOP•16mo ago

Wow

        dd($this->form->getState());
        dd($this->data);

        dd($this->form->getState());
        dd($this->data);

Added your line in above mine and now it works

Lara Zeus•16mo ago

the validation actually will be triggered when getState called

ShavikOP•16mo ago

So do I need to assign the result of getState to my $data variable? Since right now, clearing data['message'] is how I reset the form input Appreciate the help! Funny you're the one to respond, We were just looking at your CMS package for another one of our projects.

Lara Zeus•16mo ago

no, just in your create fun $data = $this->form->getState(); and use these $data to save your model

cheesegrits•16mo ago

It's right there in the "Adding a form to a Livewire component" docs. 🙂 "you can validate and get the form's data using $this->form->getState(). It's important that you use this method instead of accessing the $this->data property directly, because the form's data needs to be validated and transformed into a useful format before being returned" Definitely worth reading that section. https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component/#adding-the-form

Adding a form to a Livewire component - Form Builder - Filament

Zen•8mo ago

Look like native(false) cannot use with required()

Gaming

Programming

Date/Time Picker Required