DateTime picker not displayed correctly

[rabol]

Describe the bug

the datetime picker is not displayed correctly

To Reproduce Steps to reproduce the behavior: use this in a blade file of a lw-component

<div class="container mx-auto">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <form method="POST" action="{{ route('test.store') }}" )>
                @csrf
                <x-honeypot />
                <div>
                    <x-input label="Name" placeholder="your name" />
                </div>

                <div>
                    <x-button primary label="Primary" type="submit" />
                </div>

                <div>
                    <x-datetime-picker without-time label="Appointment Date" placeholder="Appointment Date" />
                </div>
                <div>
                    <x-select label="Select Status" placeholder="Select one status" wire:model.defer="model">
                        <x-select.option label="Pending" value="1" />
                        <x-select.option label="In Progress" value="2" />
                        <x-select.option label="Stuck" value="3" />
                        <x-select.option label="Done" value="4" />
                    </x-select>
                </div>
            </form>
        </div>
    </div>
</div>

here is the lw-component

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TestComponent extends Component
{
    protected array $rules = ['model' => 'required'];

    protected array $messages = ['model.required' => 'Select any value'];

    public $model = null;

    public function render()
    {
        return view('livewire.test-component');
    }
}

[Tiagospem]

@rabol hi there! You can use display-format prop

[PH7-Jack]

Missing wire:model in your datepicker component

[rabol]

adding the model does not change the fact that the bottom part of the date picker is not visible If you look at the screenshoot, you can see that not all of the date picker is visible

[PH7-Jack]

<div class="container mx-auto">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white <!-- remove  overflow-hidden ---> shadow-xl sm:rounded-lg">

You are using an overflow-hidden class, all elements will be hidden if overlap the div

[PH7-Jack]

This is not a wireui bug, closing this issue If you believe that it is a bug, tag me with @ to reopen this issue

[rabol]

sorry, my fault

[PH7-Jack]

Don't worry, bro

[judgej]

Replace overflow-hidden with overflow-visible. That's what is likely hiding the calendar.