How to use splade input component without defining form component?

[takielias]

I have a form with 5 inputs. I want to take my Last input as Flatpickr using pre-loaded modal. But when I click to Open the Modal I got an Error like below

    <x-splade-modal modal name="schedule-modal">
             <x-splade-input name="scheduled_at" date time/>
    </x-splade-modal>

But If I use

    <x-splade-modal modal name="schedule-modal">
        <x-splade-form class="flex flex-row">
            <x-splade-input name="scheduled_at" date time/>
        </x-splade-form>
    </x-splade-modal>

It works.

So how can I use the modal without defining the form component?
OR how can assign the pre-defined form with the modal component?

[pascalbaljet]

Please provide a complete code example of the form. And out of curiosity, why do you want the date picker as a single element in a modal?

[takielias]

@pascalbaljet The code below is just an example.

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create Tweet') }}
        </h2>
    </x-slot>

    <x-panel class="min-h-screen">
        <x-splade-form action="{{route('store.tweet')}}" class="flex flex-row">
            <x-splade-data :default="$twitterAccount">
                <TweetCreate v-slot="TweetCreate">
                    <x-tweet-create></x-tweet-create>
                    <x-tweet-preview></x-tweet-preview>
                </TweetCreate>
             <x-splade-modal modal name="schedule-modal">
             <x-splade-input name="scheduled_at" date time />
            </x-splade-modal>
            </x-splade-data>
        </x-splade-form>
    </x-panel>
</x-app-layout>

There are severals options. One of them is Tweet Scheduling. And The Modal Button Code looks like below

<Link href="#schedule-modal">Create Schedule</Link>

Obviously, I can handle the whole form using a normal form or in a splade modal. But I want to try that for user friendly UI.