Portal UI

Date Picker

A date picker component using flatpickr . 

<x-portal::datepicker placeholder="yyyy-mm-dd" type="date" />

Publishing Component

If you want to customize the components, you can publish them by running the following command : 

php artisan vendor:publish --tag=portal-ui:datepicker --force


With Config 

<x-portal::datepicker 
    placeholder="yyyy-mm-dd" 
    config="{ 
        enableTime: true,
        dateFormat: 'Y-m-d H:i',
        minDate : '2025-02-02'
    }" 
/>


Time Picker 

<x-portal::datepicker 
    placeholder="hh:mm" 
    icon="time"
    type="time"
    value="13:00" 
/>


Date Range 

<x-portal::datepicker placeholder="yyyy-mm-dd - yyyy-mm-dd" mode="range" class="!w-[300px]"/>