+ 
+ 
+ 
+ 
+ 
+
+
+
](https://spatie.be/github-ad-click/filament-flatpickr)
-
-We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
-
-We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
+**NB: These docs are for v3.x, which only supports Filament 3.x. For Filament v2 users, [use this guide instead](https://github.com/savannabits/filament-flatpickr/tree/main)**
## Installation
-You can install the package via composer:
+Install the package via composer:
```bash
-composer require coolsam/filament-flatpickr
+composer require coolsam/flatpickr
```
-
-You can publish and run the migrations with:
+Next, Run the `filament:assets` command to ensure the package's assets are published:
```bash
-php artisan vendor:publish --tag="filament-flatpickr-migrations"
-php artisan migrate
+php artisan filament:assets
```
-You can publish the config file with:
+You may optionally publish the package's config file with the following command:
```bash
-php artisan vendor:publish --tag="filament-flatpickr-config"
+php artisan vendor:publish --tag="coolsam-flatpickr-config"
```
-This is the contents of the published config file:
-
-```php
-return [
-];
-```
-
-Optionally, you can publish the views using
+## Usage
+You can do a lot with just one Component: `Flatpickr`
+You can use the Flatpickr component from this package as:
+* DatePicker
+* TimePicker
+* DateTimePicker
+* Range Picker
+* Week Picker,
+* Multiple-Date Picker
+* Month Picker
-```bash
-php artisan vendor:publish --tag="filament-flatpickr-views"
-```
+Most of the fluent config methods are similar to [Flatpickr's official](https://flatpickr.js.org/options/) options in naming.
+The rest of the configuration is similar to a normal Filament `TextInput`.
-## Usage
+Here are some examples of the methods. Refer to Flatpickr's Official Documentation for details on each of the configurations.
```php
-$filamentFlatpickr = new Coolsam\FilamentFlatpickr();
-echo $filamentFlatpickr->echoPhrase('Hello, Coolsam!');
+use Coolsam\FilamentFlatpickr\Forms\Components\Flatpickr;
+
+// Basic, Date Field
+Flatpickr::make('test_field') // Minimal Config as a datepicker
+Flatpickr::make('test_field')
+ ->allowInput() // Allow a user to manually input the date in the textbox (make the textbox editable)
+ ->altInput(true) // Enable the use of Alternative Input (See Flatpickr docs)
+ ->altFormat('F j, Y') // Alternative input format
+ ->enableTime() // Turn this into a DateTimePicker
+ ->disabledDates(['2023-07-25','2023-07-26']) // Disable specific dates from being selected.
+ ->minDate(today()->startOfYear()) // Set the minimum allowed date
+ ->maxDate(today()) // Set the maximum allowed date.
+ ->minTime(now()->format('H:i:s')) // Set the minimum allowed time
+ ->maxTime(now()->addHours(12)->format('H:i:s')) // Set the maximum allowed time
+ ->hourIncrement(1) // Intervals of incrementing hours in a time picker
+ ->minuteIncrement(10) // Intervals of minute increment in a time picker
+ ->enableSeconds(false) // Enable seconds in a time picker
+ ->defaultSeconds(0) //Initial value of the seconds element, when no date is selected
+ ->defaultMinute(00) // Initial value of the minutes element, when no date is selected
+ ->allowInvalidPreload() // Initially check if the selected date is valid
+ ->altInputClass('sample-class') // Add a css class for the alt input format
+ ->animate() // Animate transitions in the datepicker.
+ ->dateFormat('Y-m-d') // Set the main date format
+ ->ariaDateFormat('Y-m-d') // Aria
+ ->clickOpens(true) // Open the datepicker when the input is clicked.
+ ->closeOnSelect(true) // Close the datepicker once the date is selected.
+ ->conjunction(',') // Applicable only for the MultiDatePicker: Separate inputs using this conjunction. The package will use this conjunction to explode the inputs to an array.
+ ->inline(true) // Display the datepicker inline with the input, instead of using a popover.
+ ->disableMobile(true) // Disable mobile-version of the datepicker on mobile devices.
+ ->theme(\Savannabits\Flatpickr\Enums\FlatpickrTheme::AIRBNB) // Set the datepicker theme (applies for all the datepickers in the current page). For type sanity, Checkout the FlatpickrTheme enum class for a list of allowed themes.
+ ->mode(\Savannabits\Flatpickr\Enums\FlatpickrMode::RANGE) // Set the mode as single, range or multiple. Alternatively, you can just use ->range() or ->multiple()
+ ->monthSelectorType(\Savannabits\Flatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN)
+ ->shorthandCurrentMonth(true)
+ ->nextArrow('>')
+ ->prevArrow('<')
+ ->noCalendar(true)
+ ->position(\Savannabits\Flatpickr\Enums\FlatpickrPosition::AUTO_CENTER)
+ ->showMonths(1)
+ ->weekNumbers(true)
+ ->use24hr(true)
+ ->wrap(true)
+;
+Flatpickr::make('published_at')->enableTime() // Use as a DateTimePicker
+Flatpickr::make('week')->weekSelect() // Use as a Week Picker
+Flatpickr::make('report_month')->monthSelect() // Use as a Month Picker
+Flatpickr::make('start_time')->time() // Use as a TimePicker
+Flatpickr::make('filter_range')->range() // Use as a Date Range Picker
+Flatpickr::make('list_of_dates')->multiple() // Use as a Multiple Date Picker
```
## Testing
@@ -68,7 +109,7 @@ Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed re
## Contributing
-Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+Please see [CONTRIBUTING](https://github.com/savannabits/.github/blob/main/CONTRIBUTING.md) for details.
## Security Vulnerabilities
@@ -76,7 +117,7 @@ Please review [our security policy](../../security/policy) on how to report secu
## Credits
-- [Sam Maosa](https://github.com/savannabits)
+- [Savannabits](https://github.com/savannabits)
- [All Contributors](../../contributors)
## License