PHPackages webplusmultimedia/date-time-range-picker - 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. [Utility & Helpers](/categories/utility) 4. / 5. webplusmultimedia/date-time-range-picker ActiveLibrary[Utility & Helpers](/categories/utility) webplusmultimedia/date-time-range-picker ======================================== A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss V0.9.9(3y ago)92133[1 PRs](https://github.com/webplusmultimedia/date-Time-Range-Picker/pulls)MITJavaScriptPHP ^8.1CI passing Since Apr 13Pushed 1w ago1 watchersCompare [ Source](https://github.com/webplusmultimedia/date-Time-Range-Picker)[ Packagist](https://packagist.org/packages/webplusmultimedia/date-time-range-picker)[ Docs](https://github.com/webplusmultimedia/date-time-range-picker)[ RSS](/packages/webplusmultimedia-date-time-range-picker/feed)WikiDiscussions main Synced yesterday READMEChangelog (9)Dependencies (14)Versions (14)Used By (0) A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss ================================================================================== [](#a-date-datetime-time-range-date-picker-with-livewire-and-alpinejs--tailwindcss) [![Latest Version on Packagist](https://camo.githubusercontent.com/43a03b34f588f37d174c40d8c846fc9e275236de5e1f9c8f71122c610c3e7491/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776562706c75736d756c74696d656469612f646174652d74696d652d72616e67652d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/webplusmultimedia/date-time-range-picker)[![GitHub Tests Action Status](https://camo.githubusercontent.com/abefcc5d76ea00b20d98e17281ab6ae5dc4e0eb9f9e6f97e10bf2db02cf0c962/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f776562706c75736d756c74696d656469612f646174652d74696d652d72616e67652d7069636b65722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/webplusmultimedia/date-time-range-picker/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/f2c14b402822761b68aa8be691ea8a5c6981bf3fecacddae409113c11310657b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f776562706c75736d756c74696d656469612f646174652d74696d652d72616e67652d7069636b65722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/webplusmultimedia/date-time-range-picker/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/deefe2c7efc533001ab34a7e7b32747e6fc10d7a8e8105ed42f73653259488d8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776562706c75736d756c74696d656469612f646174652d74696d652d72616e67652d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/webplusmultimedia/date-time-range-picker) Here is a date, dateTime and date range picker for livewire made for Tall Stack Support us ---------- [](#support-us) [![](https://camo.githubusercontent.com/9d5480be246da9715df437952bfed177f21f06d53c68a90ed4ebdee2989cbf25/68747470733a2f2f692e706f7374696d672e63632f306a5452574459522f446174652d74696d652d72616e67652d7069636b65722d776562706c75732d6d756c74696d2d6469612d322e6a7067)](https://webplusm.net) Here is a date, dateTime and date range picker for livewire made for Tall Stack Installation ------------ [](#installation) You can install the package via composer: ``` composer require webplusmultimedia/date-time-range-picker ``` Add the following settings to your Tailwindcss config file, tailwind.config.js ``` module.exports = { presets: [ require('./vendor/webplusmultimedia/date-time-range-picker/tailwind.config.js') ], content: [ '...', /* Date time Range */ './vendor/webplusmultimedia/date-time-range-picker/js/**/*.js', './vendor/webplusmultimedia/date-time-range-picker/resources/views/**/*.blade.php', ], theme: {} } ``` In your ./resources/js/app.js, import the js file ``` import './../../vendor/webplusmultimedia/filemanager/resources/dist/js/date_time_range' ``` ### Changing color theme [](#changing-color-theme) You can customize the color theme by changing just one variable in your tailwind.config.js ``` const colors = require('tailwindcss/colors') module.exports = { ... theme: { extend: { colors: { ... 'primary-datepicker' : colors.cyan // Or what ever you want }, }, }, ... } ``` Optionally, you can publish the views using, but don't need that. ``` php artisan vendor:publish --tag="date-time-range-picker-views" ``` Usage ----- [](#usage) In your blade livewire view : ``` ``` Component attributes : ---------------------- [](#component-attributes-) - **type** : {string} (date by default) date, datetime or range - **label** : {string} (null by default) the Label to play - **minDate** and **maxDate** : {ISO8601 (Carbon\\CarbonInterface|null)} (null by default), if you need restricting dates - **lang** : {dateString} (fr by default(e.g : fr-FR ...)) - **minTime** : {int} (7(h) by default) , minimum time to reach - **maxTime** : {int} (17(h) by default) , maximum time to reach - **intervalMinute** : {int} (5 by default) , interval up/down for minutes (time and datetime type) Testing ------- [](#testing) Coming sooner ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [webplusm](https://github.com/webplusmultimedia) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 42 — FairBetter than 88% of packages Maintenance64 Regular maintenance activity Popularity19 Limited adoption so far Community12 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 Every ~0 days Total 9 Last Release 1177d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/17431035?v=4)[Daniel RAMESAY](/maintainers/webplusmultimedia)[@webplusmultimedia](https://github.com/webplusmultimedia) --- Top Contributors [![webplusmultimedia](https://avatars.githubusercontent.com/u/17431035?v=4)](https://github.com/webplusmultimedia "webplusmultimedia (28 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (18 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (12 commits)") --- Tags alpinejsdatepickerdatetime-pickerlaravel-packagelivewire-componentsrange-pickertailwindcsstall-stacktimepickerlaravelwebplusmultimediadate-time-range-picker ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/webplusmultimedia-date-time-range-picker/health.svg) ``` [![Health](https://phpackages.com/badges/webplusmultimedia-date-time-range-picker/health.svg)](https://phpackages.com/packages/webplusmultimedia-date-time-range-picker) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 329530.5k29](/packages/codewithdennis-filament-select-tree)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4911.6M11](/packages/leandrocfe-filament-apex-charts)[filament/support Core helper methods and foundation code for all Filament packages. 2331.0M245](/packages/filament-support)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.6k](/packages/rawilk-profile-filament-plugin)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.4k](/packages/tomshaw-electricgrid)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1126.6k](/packages/codebar-ag-laravel-filament-json-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)