Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webplusmultimedia/date-time-range-picker
A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss
https://github.com/webplusmultimedia/date-time-range-picker
alpinejs datepicker datetime-picker laravel-package livewire-components range-picker tailwindcss tall-stack timepicker
Last synced: about 1 month ago
JSON representation
A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss
- Host: GitHub
- URL: https://github.com/webplusmultimedia/date-time-range-picker
- Owner: webplusmultimedia
- License: mit
- Created: 2023-04-13T01:09:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-25T05:38:49.000Z (10 months ago)
- Last Synced: 2024-04-04T14:06:33.730Z (9 months ago)
- Topics: alpinejs, datepicker, datetime-picker, laravel-package, livewire-components, range-picker, tailwindcss, tall-stack, timepicker
- Language: JavaScript
- Homepage: https://webplusm.net
- Size: 342 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss
[](https://packagist.org/packages/webplusmultimedia/date-time-range-picker)
[](https://github.com/webplusmultimedia/date-time-range-picker/actions?query=workflow%3Arun-tests+branch%3Amain)
[](https://github.com/webplusmultimedia/date-time-range-picker/actions?query=workflow%3A"Fix+PHP+code+style+issues"+branch%3Amain)
[](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
[
](https://webplusm.net)
Here is a date, dateTime and date range picker for livewire made for Tall Stack
## Installation
You can install the package via composer:
```bash
composer require webplusmultimedia/date-time-range-picker
```
Add the following settings to your Tailwindcss config file, tailwind.config.js
```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
```js
import './../../vendor/webplusmultimedia/filemanager/resources/dist/js/date_time_range'
```
### Changing color theme
You can customize the color theme by changing just one variable in your tailwind.config.js
```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.
```bash
php artisan vendor:publish --tag="date-time-range-picker-views"
```
## Usage
In your blade livewire view :
```html
```
## 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
Coming sooner
```bash
composer test
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
## Credits
- [webplusm](https://github.com/webplusmultimedia)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.