Download the PHP package pasksak/laravel-flatpickr without Composer
On this page you can find all versions of the php package pasksak/laravel-flatpickr. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download pasksak/laravel-flatpickr
More information about pasksak/laravel-flatpickr
Files in pasksak/laravel-flatpickr
Package laravel-flatpickr
Short Description A laravel clone of the javascript flatpickr package
License MIT
Homepage https://github.com/asdh/laravel-flatpickr
Informations about the package laravel-flatpickr
A Laravel clone of the Javascript Flatpickr (Date picker) library
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 javascript library.
Created with ❤️ from Nepal 🇳🇵
Support
You can support me by subscribing to my YouTube channel - 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 account in Nepalese 🇳🇵 currency.
My Wise email: [email protected]
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
You can install the package via composer:
You can publish the config file with:
You can publish the assets with:
This is the contents of the published config file:
Usage
You need to include the css and js that ships with the package in your html or blade file.
Adding Css
Include this style at the head section of your page:
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:
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
Similarly include this script at the bottom of your page:
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:
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
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.
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 of the flatpickr.
Most of the description of the props written here are taken from the flatpickr documentation page.
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
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 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
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
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:
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:
showTime
Type: bool
Shows the time picker.
Example:
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 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
Type: string
The minimum time that a user can start picking from.
Example:
maxTime
Type: string
The maximum time that a user can pick to.
Example:
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
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
Type: bool
Disable the weekend in the calendar. Saturday and Sunday are disabled.
Example:
disable
Type: array
Disable the provided dates. It can be array of date string
or Carbon
.
Example:
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:
multiple
Type: bool
Sets the calendar mode to multiple
. You will be able to select multiple dates.
Example:
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:
visibleMonths
Type: int
The number of months to be shown at the same time when displaying the calendar.
Example:
inline
Type: bool
Displays the calendar inline.
Example:
showWeekNumbers
Type: bool
Shows week numbers in calendar.
Example:
value
Type: string|Carbon|array
Sets the initial selected date(s).
Example:
For a single picker, pass normal date string or Carbon
instance.
Example
For multiple picker, pass the data as array.
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.
clearable
Type: bool
Shows a clear icon on the right side of the date picker. Clicking on it will clear the selected value.
Example:
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 <script src="{{ $url ?? config('flatpickr.js_url') ?? asset('vendor/flatpickr/js/flatpickr.js') }}"></script>
at the script.blade.php file
and add 'locale='it'
at the flatpickr component
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.
Example:
Testing
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
- Laratips
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of laravel-flatpickr with dependencies
spatie/laravel-package-tools Version ^1.9.2
illuminate/contracts Version ^8.73|^9.0