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)92004[2 PRs](https://github.com/webplusmultimedia/date-Time-Range-Picker/pulls)MITJavaScriptPHP ^8.1CI passing

Since Apr 13Pushed 1mo 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 1mo ago

READMEChangelog (9)Dependencies (14)Versions (13)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 89% of packages

Maintenance62

Regular maintenance activity

Popularity21

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 50% 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

Every ~0 days

Total

9

Last Release

1120d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/67924456a7ad6ac39f6a01719d70ce659a6a9c824b3d642af22acb5503ed7728?d=identicon)[webplusmultimedia](/maintainers/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] (16 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

[leandrocfe/filament-apex-charts

Apex Charts integration for Filament PHP.

4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[ralphjsmit/livewire-urls

Get the previous and current url in Livewire.

82270.3k4](/packages/ralphjsmit-livewire-urls)[worksome/exchange

Check Exchange Rates for any currency in Laravel.

123544.7k](/packages/worksome-exchange)[hydrat/filament-table-layout-toggle

Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts.

6292.3k1](/packages/hydrat-filament-table-layout-toggle)[codebar-ag/laravel-filament-json-field

A Laravel Filament JSON Field integration with CodeMirror support

1124.1k](/packages/codebar-ag-laravel-filament-json-field)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)