{"id":22110872,"url":"https://github.com/webplusmultimedia/date-time-range-picker","last_synced_at":"2025-07-25T07:31:23.583Z","repository":{"id":152900150,"uuid":"627192893","full_name":"webplusmultimedia/date-Time-Range-Picker","owner":"webplusmultimedia","description":"A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss","archived":false,"fork":false,"pushed_at":"2025-06-16T05:27:33.000Z","size":369,"stargazers_count":9,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T19:47:14.160Z","etag":null,"topics":["alpinejs","datepicker","datetime-picker","laravel-package","livewire-components","range-picker","tailwindcss","tall-stack","timepicker"],"latest_commit_sha":null,"homepage":"https://webplusm.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webplusmultimedia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-13T01:09:25.000Z","updated_at":"2025-05-12T05:23:20.000Z","dependencies_parsed_at":"2024-04-15T07:21:55.091Z","dependency_job_id":null,"html_url":"https://github.com/webplusmultimedia/date-Time-Range-Picker","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":"spatie/package-skeleton-laravel","purl":"pkg:github/webplusmultimedia/date-Time-Range-Picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Fdate-Time-Range-Picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Fdate-Time-Range-Picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Fdate-Time-Range-Picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Fdate-Time-Range-Picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webplusmultimedia","download_url":"https://codeload.github.com/webplusmultimedia/date-Time-Range-Picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webplusmultimedia%2Fdate-Time-Range-Picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266972873,"owners_count":24014593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","datepicker","datetime-picker","laravel-package","livewire-components","range-picker","tailwindcss","tall-stack","timepicker"],"created_at":"2024-12-01T10:31:11.902Z","updated_at":"2025-07-25T07:31:23.265Z","avatar_url":"https://github.com/webplusmultimedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/webplusmultimedia/date-time-range-picker.svg?style=flat-square)](https://packagist.org/packages/webplusmultimedia/date-time-range-picker)\n[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/webplusmultimedia/date-time-range-picker/run-tests.yml?branch=main\u0026label=tests\u0026style=flat-square)](https://github.com/webplusmultimedia/date-time-range-picker/actions?query=workflow%3Arun-tests+branch%3Amain)\n[![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/webplusmultimedia/date-time-range-picker/fix-php-code-style-issues.yml?branch=main\u0026label=code%20style\u0026style=flat-square)](https://github.com/webplusmultimedia/date-time-range-picker/actions?query=workflow%3A\"Fix+PHP+code+style+issues\"+branch%3Amain)\n[![Total Downloads](https://img.shields.io/packagist/dt/webplusmultimedia/date-time-range-picker.svg?style=flat-square)](https://packagist.org/packages/webplusmultimedia/date-time-range-picker)\n\nHere is a date, dateTime and date range picker for livewire made for Tall Stack\n\n## Support us\n\n[\u003cimg src=\"https://i.postimg.cc/0jTRWDYR/Date-time-range-picker-webplus-multim-dia-2.jpg\"  /\u003e](https://webplusm.net)\n\nHere is a date, dateTime and date range picker for livewire made for Tall Stack\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require webplusmultimedia/date-time-range-picker\n```\n\nAdd the following settings to your Tailwindcss config file, tailwind.config.js\n```js\nmodule.exports = {\n    presets: [\n        require('./vendor/webplusmultimedia/date-time-range-picker/tailwind.config.js')\n    ],\n    content: [\n        '...',\n        /* Date time Range */\n        './vendor/webplusmultimedia/date-time-range-picker/js/**/*.js',\n        './vendor/webplusmultimedia/date-time-range-picker/resources/views/**/*.blade.php',\n    ],\n\n    theme: {}\n}\n```\n\nIn your ./resources/js/app.js, import the js file\n```js\nimport './../../vendor/webplusmultimedia/filemanager/resources/dist/js/date_time_range'\n```\n### Changing color theme\n\nYou can customize the color theme by changing just one variable in your tailwind.config.js\n\n```js\nconst colors = require('tailwindcss/colors')\n \nmodule.exports = {\n    ...\n    theme: {\n        extend: {\n            colors: {\n                ...\n                'primary-datepicker' : colors.cyan // Or what ever you want\n            },\n        },\n    },\n    ...\n}\n```\n\nOptionally, you can publish the views using, but don't need that.\n\n```bash\nphp artisan vendor:publish --tag=\"date-time-range-picker-views\"\n```\n\n## Usage\n\nIn your blade livewire view :\n```html\n\u003cdiv class=\"pt-5\"\u003e\n    \u003cx-webplusm-date-time-range-picker type=\"range\" label=\"Dates de formation\" \n                                       wire:model=\"date\" \n    /\u003e\n\u003c/div\u003e\n```\n\n## Component attributes :\n\n- **type** : {string} (date by default) date, datetime or range \n- **label** : {string} (null by default) the Label to play\n- **minDate** and **maxDate** : {ISO8601 (Carbon\\CarbonInterface|null)} (null by default), if you need restricting dates\n- **lang** : {dateString} (fr by default(e.g : fr-FR ...))\n- **minTime** : {int} (7(h) by default) , minimum time to reach\n- **maxTime** : {int} (17(h) by default) , maximum time to reach\n- **intervalMinute** : {int} (5 by default) , interval up/down for minutes (time and datetime type)\n\n## Testing\n\nComing sooner\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [webplusm](https://github.com/webplusmultimedia)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebplusmultimedia%2Fdate-time-range-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebplusmultimedia%2Fdate-time-range-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebplusmultimedia%2Fdate-time-range-picker/lists"}