README

A bundle of premium, native Laravel Blade components for Date, Date-Time, and Date-Range pickers. Powered by Alpine.js, Day.js, and Floating UI (no heavy Flatpickr or jQuery dependencies).

It supports dark mode out of the box and compiles directly with your application's Tailwind CSS pipeline ("Bring Your Own CSS" style).

Preview

Features

• Light & Dark Mode: Respects Tailwind's class-based dark mode (.dark).
• Zero Assets Overhead: JavaScript is minified, bundled, and inlined directly into cached Blade views. No CDN or external asset loading required.
• Floating Popovers: Powered by Floating UI with escape-overflow containment (doesn't clip inside containers or near page edges).
• Date Range Presets: Quick select range options (Today, Yesterday, Last 7 Days, Last 30 Days, etc.) with a collapsing calendar drawer.
• Typable Time Selection: Hour and Minute inputs are typable and validate inputs on the fly (with fallback select scrollboxes).
• Responsive Grid: Automatically adapts from multi-column calendar displays on desktop to a stacked layout on mobile.

Installation

1. Install the package via Composer:

   composer require phone-myat-kyaw/blade-date-pickers

2. Add the vendor scanning path to your Tailwind configuration file (e.g. tailwind.config.js or app.css for Tailwind v4) so Tailwind compiles the picker styles:

   For Tailwind CSS v4 (app.css):

   @source '../../vendor/phone-myat-kyaw/blade-date-pickers/resources/views/**/*.blade.php';

   For Tailwind CSS v3 (tailwind.config.js):

   content: [
       // ...
       "./vendor/phone-myat-kyaw/blade-date-pickers/resources/views/**/*.blade.php",
   ];

Usage

1. Single Date Picker

A clean dropdown calendar popover for selecting a single date.

<x-date-picker name="birthday" placeholder="Select date of birth" />

2. Date Time Picker

A hybrid calendar + typable time input box for selecting dates and exact times.

<x-datetime-picker name="appointment_at" placeholder="Choose date & time" />

3. Date Range Picker

A range selection popover with presets list. Selecting custom range expands two-month side-by-side calendars.

<x-date-range-picker
    name="booking_range"
    placeholder="Select check-in & check-out dates"
/>

Customization

Publish Views (Override Styles)

If you want to modify the HTML layouts, change typography, or adjust colors, publish the component views:

php artisan vendor:publish --tag=blade-date-pickers-views

This copies the templates to resources/views/vendor/blade-date-pickers/. You can edit them freely; Laravel will load these published views instead of the vendor defaults.

Note: If you publish the views, update your Tailwind content configuration path to scan your local views folder:

@source '../views/vendor/blade-date-pickers/**/*.blade.php';

Component Attributes

All picker components accept standard Laravel component properties:

• name (required): The name of the form field.
• id (optional): Defaults to the name.
• value (optional): Prefilled database values (e.g. 2026-07-15 or 2026-07-15 12:00:00 or 2026-07-08 to 2026-07-15).
• placeholder (optional): Input placeholder text.
• disabled (optional): Disables the trigger input.
• required (optional): Enforces HTML form validation.
• display-format (optional): The format shown to the user inside the input trigger box (e.g. DD/MM/YYYY, D MMMM YYYY, or hh:mm A).
• format (optional): The database-compliant format submitted in the form request. Defaults to YYYY-MM-DD (for single/range pickers) and YYYY-MM-DD HH:mm:ss (for datetime pickers).

They also accept parent attributes and event listeners (like @change) which are forwarded to the root element.

Testing

This package can be tested using Laravel Testbench.

1. Install development dependencies:

   composer install --dev

2. Run the test suite:

   vendor/bin/phpunit

License

The MIT License (MIT). Please see License File for more information.