{"id":21168608,"url":"https://github.com/laratipsofficial/laravel-flatpickr","last_synced_at":"2025-09-08T08:43:17.054Z","repository":{"id":41860060,"uuid":"458529094","full_name":"Laratipsofficial/laravel-flatpickr","owner":"Laratipsofficial","description":"A very simple Laravel package that converts the Javascript Flatpickr to a blade component.","archived":false,"fork":false,"pushed_at":"2024-04-29T23:36:26.000Z","size":1178,"stargazers_count":61,"open_issues_count":3,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-30T00:37:08.552Z","etag":null,"topics":["date","datetime","flatpickr","javascript","laravel","php"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/c/laratips","language":"PHP","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/Laratipsofficial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"asdh"}},"created_at":"2022-02-12T13:26:25.000Z","updated_at":"2024-04-24T20:00:08.000Z","dependencies_parsed_at":"2024-03-17T04:32:25.225Z","dependency_job_id":"a32f0a1b-1408-4600-974c-bc690b6cef1e","html_url":"https://github.com/Laratipsofficial/laravel-flatpickr","commit_stats":{"total_commits":41,"total_committers":4,"mean_commits":10.25,"dds":"0.46341463414634143","last_synced_commit":"2475e9f0ae84385b0a130bb6492d7b5deea887d6"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":"spatie/package-skeleton-laravel","purl":"pkg:github/Laratipsofficial/laravel-flatpickr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laratipsofficial%2Flaravel-flatpickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laratipsofficial%2Flaravel-flatpickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laratipsofficial%2Flaravel-flatpickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laratipsofficial%2Flaravel-flatpickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Laratipsofficial","download_url":"https://codeload.github.com/Laratipsofficial/laravel-flatpickr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laratipsofficial%2Flaravel-flatpickr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274159314,"owners_count":25232633,"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-09-08T02:00:09.813Z","response_time":121,"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":["date","datetime","flatpickr","javascript","laravel","php"],"created_at":"2024-11-20T15:16:14.469Z","updated_at":"2025-09-08T08:43:15.457Z","avatar_url":"https://github.com/Laratipsofficial.png","language":"PHP","funding_links":["https://github.com/sponsors/asdh"],"categories":[],"sub_categories":[],"readme":"# A Laravel clone of the Javascript Flatpickr (Date picker) library\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/asdh/laravel-flatpickr.svg?style=flat-square)](https://packagist.org/packages/asdh/laravel-flatpickr)\n[![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/Laratipsofficial/laravel-flatpickr/run-tests?label=tests)](https://github.com/Laratipsofficial/laravel-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain)\n[![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/Laratipsofficial/laravel-flatpickr/Check%20\u0026%20fix%20styling?label=code%20style)](https://github.com/Laratipsofficial/laravel-flatpickr/actions?query=workflow%3A\"Check+%26+fix+styling\"+branch%3Amain)\n[![Total Downloads](https://img.shields.io/packagist/dt/asdh/laravel-flatpickr.svg?style=flat-square)](https://packagist.org/packages/asdh/laravel-flatpickr)\n\nUsing 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.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/single-picker.png\" alt=\"Laravel Flatpickr\" width=\"300px\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" style=\"font-size:32px;\"\u003eCreated with ❤️ from Nepal 🇳🇵\u003c/p\u003e\n\n## Support\n\nYou can support me by subscribing to my [YouTube channel - Laratips](https://www.youtube.com/c/Laratips).\n\nIf 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.\n\nMy Wise email: ashish.dhamala2015@gmail.com\n\nIf you decide to support me, the please send me your twitter handle in mail so that I can shout-out about you on twitter.\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require asdh/laravel-flatpickr\n```\n\nYou can publish the config file with:\n\n```bash\nphp artisan vendor:publish --tag=\"flatpickr-config\"\n```\n\nYou can publish the assets with:\n\n```bash\nphp artisan vendor:publish --tag=\"flatpickr-assets\"\n```\n\nThis is the contents of the published config file:\n\n```php\nreturn [\n    /**\n     * The url to be used to serve css file.\n     * If null, it will use the one shipped with package.\n     */\n    'css_url' =\u003e env('FLATPICKR_CSS_URL', null),\n\n    /**\n     * The url to be used to serve js file.\n     * If null, it will use the one shipped with package.\n     */\n    'js_url' =\u003e env('FLATPICKR_JS_URL', null),\n\n    /**\n     * Determines if the styles shipped with the package should be used.\n     * Setting it to false will remove the styling for the component.\n     * The flatpickr css will be untouched.\n     */\n    'use_style' =\u003e env('FLATPICKR_USE_STYLE', true),\n\n    /**\n     * The language that flatpickr will use.\n     * If no value is passed, it will be the default one.\n     */\n    'locale' =\u003e env('FLATPICKR_LOCALE', null),\n];\n```\n\n## Usage\n\nYou need to include the css and js that ships with the package in your html or blade file.\n\n### Adding Css\n\nInclude this style at the head section of your page:\n\n```php\n@include('flatpickr::components.style')\n```\n\nOr you can use laravel blade component syntax:\n\n```html\n\u003cx-flatpickr::style /\u003e\n```\n\nIf you want to use different `url` for the css then you can change it from the .env file:\n\n```env\nFLATPICKR_CSS_URL=https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css\n```\n\nYou can even change the `url` from the component itself:\n\n```html\n\u003cx-flatpickr::style\n    url=\"https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css\"\n/\u003e\n```\n\nThe `url` passed form the component will take more priority over the config file.\n\n### Adding Js\n\nSimilarly include this script at the bottom of your page:\n\n```php\n@include('flatpickr::components.script')\n```\n\nOr you can use laravel blade component syntax:\n\n```html\n\u003cx-flatpickr::script /\u003e\n```\n\nIf you want to use different `url` for the js then you can change it from the .env file:\n\n```env\nFLATPICKR_JS_URL=https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js\n```\n\nYou can even change the `url` from the component itself:\n\n```html\n\u003cx-flatpickr::script\n    url=\"https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js\"\n/\u003e\n```\n\nThe `url` passed form the component will take more priority over the config file.\n\n### Locale\n\nIf you want to use a different locale then you can change it from the .env file:\n\n```env\nFLATPICKR_LOCALE=de\n```\n\nYou can see the [available locales from here.](https://github.com/flatpickr/flatpickr/tree/master/src/l10n)\n\n### Using the component\n\nAdd it to your page.\n\n```html\n\u003cx-flatpickr /\u003e\n```\n\nYes, it's that simple. Now you have a beautiful looking date picker in your page without touching a single javascript at all.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/single-picker.png\" alt=\"Laravel Flatpickr\" width=\"300px\"\u003e\n\u003c/p\u003e\n\n## Component props\n\nI 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.\n\nMost of the description of the props written here are taken from the flatpickr documentation page.\n\n### id\n\n**Type:** string\n\nSet 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.\n\n**Example:**\n\n```html\n\u003cx-flatpickr id=\"laravel-flatpickr\" /\u003e\n```\n\n### dateFormat\n\n**Type:** string\n\nA 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`.\n\n**Example:**\n\n```html\n\u003cx-flatpickr date-format=\"d/m/Y\" /\u003e\n```\n\n### altFormat\n\n**Type:** string\n\nExactly 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`.\n\n**Example:**\n\n```html\n\u003cx-flatpickr alt-format=\"F j, Y\" /\u003e\n```\n\n### minDate\n\n**Type:** string|Carbon\n\nThe minimum date that a user can start picking from.\n\nYou can pass a `Carbon` instance or a date format in `string` that is supported by `Carbon` or `DateTime`.\n\n**Example:**\n\n```html\n\u003cx-flatpickr min-date=\"2022-02-13\" /\u003e\n\nOR\n\n\u003cx-flatpickr :min-date=\"today()\" /\u003e\n\nOR\n\n\u003cx-flatpickr :min-date=\"\\Carbon\\Carbon::parse('2022-02-13')\" /\u003e\n```\n\n### maxDate\n\n**Type:** string|Carbon\n\nThe maximum date that a user can pick to.\n\nYou can pass a `Carbon` instance or a date format in `string` that is supported by `Carbon` or `DateTime`.\n\n**Example:**\n\n```html\n\u003cx-flatpickr max-date=\"2022-09-18\" /\u003e\n\nOR\n\n\u003cx-flatpickr :max-date=\"today()\" /\u003e\n\nOR\n\n\u003cx-flatpickr :max-date=\"today()-\u003esubDays(20)\" /\u003e\n```\n\n### showTime\n\n**Type:** bool\n\nShows the time picker.\n\n**Example:**\n\n```html\n\u003cx-flatpickr show-time /\u003e\n```\n\n### timeFormat\n\n**Type:** string\n\nA 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`.\n\n**Example:**\n\n```html\n\u003cx-flatpickr show-time time-format=\"h:i\" /\u003e\n```\n\nWhen you use `show-time` prop with `alt-format`, make sure to write both date and time format in the `alt-format` like this:\n\n**Example:**\n\n```html\n\u003cx-flatpickr show-time time-format=\"h:i\" alt-format=\"F j, Y, H:i\" /\u003e\n```\n\n### minTime\n\n**Type:** string\n\nThe minimum time that a user can start picking from.\n\n**Example:**\n\n```html\n\u003cx-flatpickr show-time min-time=\"13:25\" /\u003e\n```\n\n### maxTime\n\n**Type:** string\n\nThe maximum time that a user can pick to.\n\n**Example:**\n\n```html\n\u003cx-flatpickr show-time max-time=\"23:15\" /\u003e\n```\n\n### time24hr\n\n**Type:** bool\n\nDisplays 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.\n\n**Example:**\n\nDisplays the time picker in 12 hour mode with am and pm.\n\n```html\n\u003cx-flatpickr show-time :time24hr=\"false\" /\u003e\n```\n\n### firstDayOfWeek\n\n**Type:** int\n\nSets when the first day of the calendar should start. By default it is 0 (Sunday).\n\n**Example:**\n\nIt sets the first day of the week as Monday.\n\n```html\n\u003cx-flatpickr :first-day-of-week=\"1\" /\u003e\n```\n\n### disableWeekend\n\n**Type:** bool\n\nDisable the weekend in the calendar. Saturday and Sunday are disabled.\n\n**Example:**\n\n```html\n\u003cx-flatpickr disable-weekend /\u003e\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/disable-weekend.png\" alt=\"Laravel Flatpickr\" width=\"300px\"\u003e\n\u003c/p\u003e\n\n### disable\n\n**Type:** array\n\nDisable the provided dates. It can be array of `date string` or `Carbon`.\n\n**Example:**\n\n```html\n\u003cx-flatpickr :disable=\"['2022-02-13', '2022-02-14']\" /\u003e\n\nOR\n\n\u003cx-flatpickr :disable=\"[today(), today()-\u003eaddDay()]\" /\u003e\n```\n\n### enable\n\n**Type:** array\n\nOnly 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.\n\n**Example:**\n\n```html\n\u003cx-flatpickr :enable=\"['2022-09-18', '2022-02-14']\" /\u003e\n\nOR\n\n\u003cx-flatpickr :enable=\"[today(), today()-\u003eaddDay()]\" /\u003e\n```\n\n### multiple\n\n**Type:** bool\n\nSets the calendar mode to `multiple`. You will be able to select multiple dates.\n\n**Example:**\n\n```html\n\u003cx-flatpickr multiple /\u003e\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/multiple-picker.png\" alt=\"Laravel Flatpickr\" width=\"300px\"\u003e\n\u003c/p\u003e\n\n### range\n\n**Type:** bool\n\nSets 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`.\n\nBy default 2 months will be visible in the dropdown when the mode is `range`. You can change that using `visibleMonths` prop.\n\n**Example:**\n\n```html\n\u003cx-flatpickr range /\u003e\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/range-picker.png\" alt=\"Laravel Flatpickr\" width=\"500px\"\u003e\n\u003c/p\u003e\n\n### visibleMonths\n\n**Type:** int\n\nThe number of months to be shown at the same time when displaying the calendar.\n\n**Example:**\n\n```html\n\u003cx-flatpickr :visible-months=\"3\" /\u003e\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/3-visible-months.png\" alt=\"Laravel Flatpickr\" width=\"600px\"\u003e\n\u003c/p\u003e\n\n### inline\n\n**Type:** bool\n\nDisplays the calendar inline.\n\n**Example:**\n\n```html\n\u003cx-flatpickr inline /\u003e\n```\n\n### showWeekNumbers\n\n**Type:** bool\n\nShows week numbers in calendar.\n\n**Example:**\n\n```html\n\u003cx-flatpickr show-week-numbers /\u003e\n```\n\n### value\n\n**Type:** string|Carbon|array\n\nSets the initial selected date(s).\n\n**Example:**\n\nFor a single picker, pass normal date string or `Carbon` instance.\n\n```html\n\u003cx-flatpickr value=\"2022-09-18\" /\u003e\n\nOR\n\n\u003cx-flatpickr :value=\"\\Carbon\\Carbon::parse('2022-09-18')\" /\u003e\n```\n\n**Example**\n\nFor multiple picker, pass the data as array.\n\n```html\n\u003cx-flatpickr :value=\"['2022-09-18']\" multiple /\u003e\n\nOR\n\n\u003cx-flatpickr :value=\"[\\Carbon\\Carbon::parse('2022-09-18')]\" multiple /\u003e\n```\n\n**Example**\n\nFor 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.\n\n```html\n\u003cx-flatpickr value=\"2022-09-18 to 2022-10-11\" range /\u003e\n\nOR\n\n\u003cx-flatpickr :value=\"['2022-09-18', '2022-10-11']\" range /\u003e\n```\n\n### clearable\n\n**Type:** bool\n\nShows a clear icon on the right side of the date picker. Clicking on it will clear the selected value.\n\n**Example:**\n\n```html\n\u003cx-flatpickr clearable /\u003e\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"docs/images/clearable.png\" alt=\"Laravel Flatpickr\" width=\"300px\"\u003e\n\u003c/p\u003e\n\n## Event Hooks\n\nYou 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).\n\n**Example:**\n\n```html\n\u003cx-flatpickr clearable onChange=\"handleChange\" /\u003e\n\n\u003cscript\u003e\n    function handleChange(selectedDates, dateStr, instance) {\n        console.log({ selectedDates, dateStr, instance });\n    }\n\u003c/script\u003e\n```\n\n## Testing\n\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](.github/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-   [Laratips](https://github.com/Laratipsofficial)\n-   [All Contributors](../../contributors)\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%2Flaratipsofficial%2Flaravel-flatpickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaratipsofficial%2Flaravel-flatpickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaratipsofficial%2Flaravel-flatpickr/lists"}