Flux Date and Time as Input Group

[PrinceMinky]

Flux version

v2.2.1

Livewire version

v3.6.3

Tailwind version

4.1.11

Browser and Operating System

Edge on Windows

What is the problem?

I have a Flux Date and a Flux Input field that I would like to group.

As seen in the image it isn't supported.

Code snippets

        <!-- Due Date & Time -->
        <flux:input.group>
            <flux:date-picker
                label="Due Date"
                wire:model="dueAtDate"
                with-today
                :min="now()->format('Y-m-d')"
            >
                <x-slot name="trigger">
                    <flux:date-picker.input />
                </x-slot>
            </flux:date-picker>

            <!-- Due Time -->
            <flux:input
                type="time"
                wire:model="dueAtTime"
            />
        </flux:input.group>

How do you expect it to work?

I expect the date to be treated as an input field that can be grouped and such.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@PrinceMinky thanks for reporting! The issue is that you have a label on the date picker. When using an input group, you need to remove the label otherwise it will push the date picker down and cause the formatting issues you are seeing.

Instead you should move the label to the input group.

I'm going to close this as I don't believe it's an issue with Flux. But if you're still having troubles, then feel free to comment back here.

<flux:input.group label="Due Date">
    <flux:date-picker
        wire:model="dueAtDate"
        with-today
        :min="now()->format('Y-m-d')"
    >
        <x-slot name="trigger">
            <flux:date-picker.input />
        </x-slot>
    </flux:date-picker>

    <!-- Due Time -->
    <flux:input
        type="time"
        wire:model="dueAtTime"
    />
</flux:input.group>