PHPackages pasksak/laravel-flatpickr - 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. pasksak/laravel-flatpickr ActiveLibrary[Utility & Helpers](/categories/utility) pasksak/laravel-flatpickr ========================= A laravel clone of the javascript flatpickr package 1.0.3(4y ago)06MITPHPPHP ^8.0|^8.1 Since Feb 13Pushed 3y agoCompare [ Source](https://github.com/pasksak/laravel-flatpickr)[ Packagist](https://packagist.org/packages/pasksak/laravel-flatpickr)[ Docs](https://github.com/asdh/laravel-flatpickr)[ GitHub Sponsors](https://github.com/asdh)[ RSS](/packages/pasksak-laravel-flatpickr/feed)WikiDiscussions main Synced today READMEChangelogDependencies (12)Versions (8)Used By (0) A Laravel clone of the Javascript Flatpickr (Date picker) library ================================================================= [](#a-laravel-clone-of-the-javascript-flatpickr-date-picker-library) [![Latest Version on Packagist](https://camo.githubusercontent.com/4a0784f4792b24108ba04fa9b8086d8c7a3bc0fa5cff60d70c3c1fa663462e7d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f617364682f6c61726176656c2d666c61747069636b722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/asdh/laravel-flatpickr)[![GitHub Tests Action Status](https://camo.githubusercontent.com/18bdb3599002067f5417e010154024c4cbea34054a06941168266dc1e9eff9a1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f4c617261746970736f6666696369616c2f6c61726176656c2d666c61747069636b722f72756e2d74657374733f6c6162656c3d7465737473)](https://github.com/Laratipsofficial/laravel-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/aed7692f58fbc9fa7bca42e6434a89550cbbde67f2f5447a474f2407fb634d47/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f4c617261746970736f6666696369616c2f6c61726176656c2d666c61747069636b722f436865636b253230262532306669782532307374796c696e673f6c6162656c3d636f64652532307374796c65)](https://github.com/Laratipsofficial/laravel-flatpickr/actions?query=workflow%3A%22Check+%26+fix+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/6fd0bd3e6ee32d1526db11e6976b4f97c2be8eb003d80b312db6829b441ad09c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f617364682f6c61726176656c2d666c61747069636b722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/asdh/laravel-flatpickr) Using this package you can add a beautiful date or datetime picker into your project without touching any javascript with the power or laravel component. It is just a laravel component wrapper for the [Flatpickr](https://flatpickr.js.org/) javascript library. [![Laravel Flatpickr](docs/images/single-picker.png)](docs/images/single-picker.png) Created with ❤️ from Nepal 🇳🇵 Support ------- [](#support) You can support me by subscribing to my [YouTube channel - Laratips](https://www.youtube.com/c/Laratips). If you want me to continue developing this package and want me to develop other similar packages, then you help me financially by sending few bucks to my [Wise](https://wise.com/invite/ath/ashishd233) account in Nepalese 🇳🇵 currency. My Wise email: If you decide to support me, the please send me your twitter handle in mail so that I can shout-out about you on twitter. Installation ------------ [](#installation) You can install the package via composer: ``` composer require asdh/laravel-flatpickr ``` You can publish the config file with: ``` php artisan vendor:publish --tag="flatpickr-config" ``` You can publish the assets with: ``` php artisan vendor:publish --tag="flatpickr-assets" ``` This is the contents of the published config file: ``` return [ /** * The url to be used to serve css file. * If null, it will use the one shipped with package. */ 'css_url' => env('FLATPICKR_CSS_URL', null), /** * The url to be used to serve js file. * If null, it will use the one shipped with package. */ 'js_url' => env('FLATPICKR_JS_URL', null), /** * Determines if the styles shipped with the package should be used. * Setting it to false will remove the styling for the component. * The flatpickr css will be untouched. */ 'use_style' => env('FLATPICKR_USE_STYLE', true), ]; ``` Usage ----- [](#usage) You need to include the css and js that ships with the package in your html or blade file. ### Adding Css [](#adding-css) Include this style at the head section of your page: ``` @include('flatpickr::components.style') ``` Or you can use laravel blade component syntax: ``` ``` If you want to use different `url` for the css then you can change it from the .env file: ``` FLATPICKR_CSS_URL=https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css ``` You can even change the `url` from the component itself: ``` ``` The `url` passed form the component will take more priority over the config file. ### Adding Js [](#adding-js) Similarly include this script at the bottom of your page: ``` @include('flatpickr::components.script') ``` Or you can use laravel blade component syntax: ``` ``` If you want to use different `url` for the js then you can change it from the .env file: ``` FLATPICKR_JS_URL=https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js ``` You can even change the `url` from the component itself: ``` ``` The `url` passed form the component will take more priority over the config file. ### Using the component [](#using-the-component) Add it to your page. ``` ``` Yes, it's that simple. Now you have a beautiful looking date picker in your page without touching a single javascript at all. [![Laravel Flatpickr](docs/images/single-picker.png)](docs/images/single-picker.png) Component props --------------- [](#component-props) I have made different `props` for this component that will be converted into the `config` options of the `flatpickr`. Make sure to look into the [config options](https://flatpickr.js.org/options) of the flatpickr. Most of the description of the props written here are taken from the flatpickr documentation page. ### id [](#id) **Type:** string Set the id of the component. It will apply id to the underlying `input` tag. If no id is provided, it will use the autogenerated id. **Example:** ``` ``` ### dateFormat [](#dateformat) **Type:** string A string of characters which are used to define how the date will be displayed in the input box. Please check the [flatpickr documentation](https://flatpickr.js.org/formatting/) page for the supported characters. By default the date format is `Y-m-d` but you can change it to other formats to like `d/m/Y`. **Example:** ``` ``` ### altFormat [](#altformat) **Type:** string Exactly the same as date format, but for the altInput field. If you want different format to be visible for the user then you can use this. By default it will use the same format as that of `dateFormat`. **Example:** ``` ``` ### minDate [](#mindate) **Type:** string|Carbon The minimum date that a user can start picking from. You can pass a `Carbon` instance or a date format in `string` that is supported by `Carbon` or `DateTime`. **Example:** ``` OR OR ``` ### maxDate [](#maxdate) **Type:** string|Carbon The maximum date that a user can pick to. You can pass a `Carbon` instance or a date format in `string` that is supported by `Carbon` or `DateTime`. **Example:** ``` OR OR ``` ### showTime [](#showtime) **Type:** bool Shows the time picker. **Example:** ``` ``` ### timeFormat [](#timeformat) **Type:** string A string of characters which are used to define how the time will be displayed in the input box. Please check the [flatpickr documentation](https://flatpickr.js.org/formatting/) page for the supported characters. By default the time format is `H-i` but you can change it to other formats to like `h:i`. **Example:** ``` ``` When you use `show-time` prop with `alt-format`, make sure to write both date and time format in the `alt-format` like this: **Example:** ``` ``` ### minTime [](#mintime) **Type:** string The minimum time that a user can start picking from. **Example:** ``` ``` ### maxTime [](#maxtime) **Type:** string The maximum time that a user can pick to. **Example:** ``` ``` ### time24hr [](#time24hr) **Type:** bool Displays time picker in 24 hour mode without AM/PM selection when enabled. By default it is set to true. To show in 12 hour mode, set it to false. **Example:** Displays the time picker in 12 hour mode with am and pm. ``` ``` ### firstDayOfWeek [](#firstdayofweek) **Type:** int Sets when the first day of the calendar should start. By default it is 0 (Sunday). **Example:** It sets the first day of the week as Monday. ``` ``` ### disableWeekend [](#disableweekend) **Type:** bool Disable the weekend in the calendar. Saturday and Sunday are disabled. **Example:** ``` ``` [![Laravel Flatpickr](docs/images/disable-weekend.png)](docs/images/disable-weekend.png) ### disable [](#disable) **Type:** array Disable the provided dates. It can be array of `date string` or `Carbon`. **Example:** ``` OR ``` ### enable [](#enable) **Type:** array Only enable the provided dates. It can be array of `date string` or `Carbon`. All the other dates other than provided in the `enable` array will be disabled when used. **Example:** ``` OR ``` ### multiple [](#multiple) **Type:** bool Sets the calendar mode to `multiple`. You will be able to select multiple dates. **Example:** ``` ``` [![Laravel Flatpickr](docs/images/multiple-picker.png)](docs/images/multiple-picker.png) ### range [](#range) **Type:** bool Sets the calendar mode to `range`. You will be able to select range of dates. If you use both `multiple` and `range`, the mode will be set to `range`. By default 2 months will be visible in the dropdown when the mode is `range`. You can change that using `visibleMonths` prop. **Example:** ``` ``` [![Laravel Flatpickr](docs/images/range-picker.png)](docs/images/range-picker.png) ### visibleMonths [](#visiblemonths) **Type:** int The number of months to be shown at the same time when displaying the calendar. **Example:** ``` ``` [![Laravel Flatpickr](docs/images/3-visible-months.png)](docs/images/3-visible-months.png) ### inline [](#inline) **Type:** bool Displays the calendar inline. **Example:** ``` ``` ### showWeekNumbers [](#showweeknumbers) **Type:** bool Shows week numbers in calendar. **Example:** ``` ``` ### value [](#value) **Type:** string|Carbon|array Sets the initial selected date(s). **Example:** For a single picker, pass normal date string or `Carbon` instance. ``` OR ``` **Example** For multiple picker, pass the data as array. ``` OR ``` **Example** For range picker, pass the 2 dates as string separated by `to` in between. Or pass 2 dates as array and it will select all the dates between and including them. ``` OR ``` ### clearable [](#clearable) **Type:** bool Shows a clear icon on the right side of the date picker. Clicking on it will clear the selected value. **Example:** ``` ``` [![Laravel Flatpickr](docs/images/clearable.png)](docs/images/clearable.png) ### locale [](#locale) **Type:** string Add locale language localization. Before that it's needed add the proper locale .js src line script in the script.blade.php file in the published vendor dir of the laravel project. **Example** For italian language add the following line just next the first `` at the script.blade.php file ``` ``` and add `'locale='it'` at the flatpickr component ``` ``` Event Hooks ----------- [](#event-hooks) You can pass all the event hooks present in the `flatpickr` library like `onChange`, `onOpen`, `onClose`, etc. Please check all the hooks available in their [documentation page](https://flatpickr.js.org/events/#hooks). **Example:** ``` function handleChange(selectedDates, dateStr, instance) { console.log({ selectedDates, dateStr, instance }); } ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Laratips](https://github.com/Laratipsofficial) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 27 — LowBetter than 47% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community10 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 60.8% 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 ~8 days Total 4 Last Release 1574d ago PHP version history (2 changes)1.0.0PHP ^8.0 1.0.2PHP ^8.0|^8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/99ec7d5a49d1e3f1070a70cdbc3a20af4a125dfde417c8ffc9d8841d94a2dc8d?d=identicon)[pasksak](/maintainers/pasksak) --- Top Contributors [![Laratipsofficial](https://avatars.githubusercontent.com/u/72372072?v=4)](https://github.com/Laratipsofficial "Laratipsofficial (31 commits)")[![pasksak](https://avatars.githubusercontent.com/u/71698954?v=4)](https://github.com/pasksak "pasksak (11 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (4 commits)") --- Tags laravelasdhlaravel-flatpickr ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/pasksak-laravel-flatpickr/health.svg) ``` [![Health](https://phpackages.com/badges/pasksak-laravel-flatpickr/health.svg)](https://phpackages.com/packages/pasksak-laravel-flatpickr) ``` ### Alternatives [spatie/laravel-pdf Create PDFs in Laravel apps 1.0k4.8M46](/packages/spatie-laravel-pdf)[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)[worksome/exchange Check Exchange Rates for any currency in Laravel. 124603.0k](/packages/worksome-exchange)[stephenjude/laravel-wallet A simple wallet implementation for Laravel 26611.9k](/packages/stephenjude-laravel-wallet)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin)[tarfin-labs/event-machine Event-driven state machines for Laravel with event sourcing, type-safe context, and full audit trail. 199.4k](/packages/tarfin-labs-event-machine) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)