PHPackages phone-myat-kyaw/blade-date-pickers - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. phone-myat-kyaw/blade-date-pickers ActiveLibrary phone-myat-kyaw/blade-date-pickers ================================== Native Blade date, datetime, and date range pickers. v1.0.0(1mo ago)032↓55.6%Blade Since Jul 15Pushed 1mo agoCompare [ Source](https://github.com/phone-myat-kyaw/blade-date-pickers)[ Packagist](https://packagist.org/packages/phone-myat-kyaw/blade-date-pickers)[ RSS](/packages/phone-myat-kyaw-blade-date-pickers/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (3)Versions (2)Used By (0) Blade Date Pickers ================== [](#blade-date-pickers) [![Latest Version on Packagist](https://camo.githubusercontent.com/136b46d6ddaed9efb5c61fbc59734771a7b3298726b0553c73be23b936806fd1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f70686f6e652d6d7961742d6b7961772f626c6164652d646174652d7069636b6572732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/phone-myat-kyaw/blade-date-pickers)[![Total Downloads](https://camo.githubusercontent.com/08764db6eae652cc6ce60e28ea45f8c9a82f8196cdf62902edbfeaba57bde88e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f70686f6e652d6d7961742d6b7961772f626c6164652d646174652d7069636b6572732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/phone-myat-kyaw/blade-date-pickers)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md) 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 ------- [](#preview) [![Date Picker Preview](docs/images/datepicker-preview.png)](docs/images/datepicker-preview.png) [![Date Range Picker Preview](docs/images/daterange-preview.png)](docs/images/daterange-preview.png) --- Features -------- [](#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 ------------ [](#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 ----- [](#usage) ### 1. Single Date Picker [](#1-single-date-picker) A clean dropdown calendar popover for selecting a single date. ``` ``` ### 2. Date Time Picker [](#2-date-time-picker) A hybrid calendar + typable time input box for selecting dates and exact times. ``` ``` ### 3. Date Range Picker [](#3-date-range-picker) A range selection popover with presets list. Selecting custom range expands two-month side-by-side calendars. ``` ``` --- Customization ------------- [](#customization) ### Publish Views (Override Styles) [](#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 -------------------- [](#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 ------- [](#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 ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 36 — LowBetter than 79% of packages Maintenance90 Actively maintained with recent releases Popularity10 Limited adoption so far Community6 Small or concentrated contributor base Maturity33 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 46d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b731923c2a2d655b20d16d9710fb107d4175b8039fb68291b32a2ac9bb6e87d4?d=identicon)[phone-myat-kyaw](/maintainers/phone-myat-kyaw) --- Top Contributors [![phone-myat-kyaw](https://avatars.githubusercontent.com/u/93188915?v=4)](https://github.com/phone-myat-kyaw "phone-myat-kyaw (5 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/phone-myat-kyaw-blade-date-pickers/health.svg) ``` [![Health](https://phpackages.com/badges/phone-myat-kyaw-blade-date-pickers/health.svg)](https://phpackages.com/packages/phone-myat-kyaw-blade-date-pickers) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.7M3.5k](/packages/craftcms-cms)[laravel/ai The official AI SDK for Laravel. 1.1k6.4M360](/packages/laravel-ai)[psalm/plugin-laravel Psalm plugin for Laravel 3365.5M359](/packages/psalm-plugin-laravel)[ublabs/blade-simple-icons A package to easily make use of Simple Icons in your Laravel Blade views. 1868.9k](/packages/ublabs-blade-simple-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)