Skip to content

Commit

Permalink
Merge pull request #28 from savannabits/2.x-dev
Browse files Browse the repository at this point in the history 
Updated documentation
  • Loading branch information
@coolsam726
coolsam726 committed Jul 27, 2023
2 parents 9010d17 + 909a08e commit f2b472d
Showing 1 changed file with 64 additions and 73 deletions.
137 changes: 64 additions & 73 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,30 @@
<p align="center">
<a href="https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain"><img alt="Tests" src="https://img.shields.io/github/actions/workflow/status/savannabits/filament-modules/run-tests.yml?branch=main&label=tests&style=for-the-badge&logo=github"></a>
<a href="https://github.com/savannabits/filament-flatpickr/actions?query=workflow%fix-php-code-style-issues+branch%3Amain"><img alt="Styling" src="https://img.shields.io/github/actions/workflow/status/savannabits/filament-modules/fix-php-code-style-issues.yml?branch=main&label=code%20style&style=for-the-badge&logo=github"></a>
<a href="https://laravel.com"><img alt="Laravel v9.x" src="https://img.shields.io/badge/Laravel-v9.x-FF2D20?style=for-the-badge&logo=laravel"></a>
<a href="https://filamentphp.com"><img alt="Filament v2.x" src="https://img.shields.io/badge/FilamentPHP-v2.x-FB70A9?style=for-the-badge&logo=filament"></a>
<a href="https://php.net"><img alt="PHP 8.1" src="https://img.shields.io/badge/PHP-8.1-777BB4?style=for-the-badge&logo=php"></a>
<a href="https://packagist.org/packages/savannabits/filament-flatpickr"><img alt="Packagist" src="https://img.shields.io/packagist/dt/savannabits/filament-flatpickr.svg?style=for-the-badge&logo=count"></a>
</p>

# Flatpickr Date/Time Picker as a Filament Field
Use **[Flatpickr](https://flatpickr.js.org/)** as your date picker in your Filament Forms and Panels.

[![Latest Version on Packagist](https://img.shields.io/packagist/v/savannabits/filament-flatpickr.svg?style=flat-square)](https://packagist.org/packages/savannabits/filament-flatpickr)
[![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/savannabits/filament-flatpickr/run-tests?label=tests)](https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain)
[![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/savannabits/filament-flatpickr/Fix%20PHP%20code%20style%20issues?label=code%20style)](https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3A"Fix+PHP+code+style+issues"+branch%3Amain)
[![Total Downloads](https://img.shields.io/packagist/dt/savannabits/filament-flatpickr.svg?style=flat-square)](https://packagist.org/packages/savannabits/filament-flatpickr)

Flatpickr is one of the most popular js datepickers. This filament plugin allows you to use flatpickr as a Filament Field without the sweat of configuration.

![image](https://user-images.githubusercontent.com/5610289/183527622-4d26a2cb-ed8b-46d6-ba57-08aeeccdd7d6.png)
![image](https://user-images.githubusercontent.com/5610289/183527983-17401461-a1eb-4ba4-a83e-d65b267b8a7d.png)

## Features
- Configure easily using fluent (chained) methods
- Supports an optional month Selector
- Supports an optional week selector
- Support for both light and dark modes
- Specify the theme (among the available themes) as a configuration
- Supports Range Selection mode
- Supports multiple date selection mode
- And many more features are coming...
**NB: These docs are for v2.x, which only supports Filament 2.x. Support for Filament 3.x is still under development**

## Installation

You can install the package via composer:
Install the package via composer:

```bash
composer require savannabits/filament-flatpickr
```

You can publish the config file with:
Next, publish the package's assets with the following command:

```bash
php artisan vendor:publish --tag="filament-flatpickr-config"
php artisan vendor:publish --tag="filament-flatpickr-assets" --force
```

This is the contents of the published config file:

```php
return [
'default_theme' => 'airbnb', // 'default','dark','material_blue','material_green','material_red','material_orange','airbnb','confetti'
];
```
If you are using a custom filament theme (using tailwind.config.js), append the following to `tailwind.config.js` under `content` for proper styling:
```js
module.exports = {
Expand All @@ -52,54 +35,62 @@ module.exports = {
```
## Usage
Use the `Flatpickr` field anywhere in your filament forms as shown in the following examples
```php
use Savannabits\Flatpickr\Flatpickr;

// Basic, Date Field
Flatpickr::make('read_at')->default(now()),
```
![image](https://user-images.githubusercontent.com/5610289/183526410-e1318643-f9ee-4a5b-b344-4eb1dcf86cf9.png)
```php
// Datetime field
Flatpickr::make('read_at')->enableTime(),
```
![image](https://user-images.githubusercontent.com/5610289/183526312-f76afd0f-2132-4179-9120-e6730beb7093.png)
```php
// Month Selector field
Flatpickr::make('read_at')->monthSelect(),
```
![image](https://user-images.githubusercontent.com/5610289/183527776-09de10a0-9caa-4c73-a114-0855c1d72c67.png)
The Flatpickr component from this package a **datepicker, timepicker, datetimepicker, date range picker, week picker and month picker** based on your configuration.
Most of the fluent config methods you can align are similar to [Flatpickr's official](https://flatpickr.js.org/options/) options in naming.
The rest of the methods are just like the other filament inputs.
```php
// Date Range picker field
Flatpickr::make('read_at')->rangePicker(),
```
![image](https://user-images.githubusercontent.com/5610289/183526584-121d9062-5a4a-487f-8afc-1b118c4ac474.png)
Here are some examples of the methods. Refer to Flatpickr's Official Documentation for details on each of the configurations.
```php
// Specify the Date format
Flatpickr::make('read_at')->dateFormat('Y-m-d'),

// Toggle AltInput (true by default) and set Alt Display Format:
Flatpickr::make('read_at')->altInput(true)->altFormat('F J Y'),
```
![image](https://user-images.githubusercontent.com/5610289/183525593-ff27da63-199f-4cda-b444-74cae729d5be.png)
```php
// Specify the input Date Format
Flatpickr::make('read_at')->dateFormat('d/m/Y')->altInput(false),
```
![image](https://user-images.githubusercontent.com/5610289/183526041-9dbebc2b-14b9-400b-8362-434719cd556b.png)
use Savannabits\Flatpickr\Flatpickr;

```php
// Specify the Datepicker's Theme: See for https://flatpickr.js.org/themes/ available themes
Flatpickr::make('read_at')->theme('material_red'),
// Basic, Date Field
Flatpickr::make('test_field') // Minimal Config as a datepicker
Flatpickr::make('test_field')
->allowInput(true)
->altInput(true)
->altFormat('F j, Y')
->enableTime()
->disabledDates(['2023-07-25','2023-07-26'])
->minDate(today()->startOfYear())
->maxDate(today())
->minTime(now()->format('H:i:s'))
->maxTime(now()->addHours(12)->format('H:i:s'))
->hourIncrement(1)
->minuteIncrement(10)
->enableSeconds(false)
->defaultSeconds(0) //Initial value of the seconds element, when no date is selected
->defaultMinute(00)
->allowInvalidPreload()
->altInputClass('sample-class')
->animate()
->dateFormat('Y-m-d')
->ariaDateFormat('Y-m-d')
->clickOpens(true)
->closeOnSelect(true)
->conjunction(',')
->inline(true)
->disableMobile(true)
->theme(\Savannabits\Flatpickr\Enums\FlatpickrTheme::AIRBNB)
->mode(\Savannabits\Flatpickr\Enums\FlatpickrMode::RANGE)
->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
```
![image](https://user-images.githubusercontent.com/5610289/183527163-62abbf8c-436d-4609-aa17-4cd135780ce8.png)
## Automatic dark mode:
![image](https://user-images.githubusercontent.com/5610289/183527360-952ff77f-df8b-4f5b-b00b-489b302b43fa.png)
## Testing
Expand Down

0 comments on commit f2b472d

Please sign in to comment.