1. Go to this page and download the library: Download coolsam/flatpickr library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
coolsam / flatpickr example snippets
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(\Coolsam\FilamentFlatpickr\Enums\FlatpickrTheme::AIRBNB) // Set the datepicker theme (applies for all the date-pickers in the current page). For type sanity, Checkout the FlatpickrTheme enum class for a list of allowed themes.
->mode(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMode::RANGE) // Set the mode as single, range or multiple. Alternatively, you can just use ->range() or ->multiple()
->monthSelectorType(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN)
->shorthandCurrentMonth(true)
->nextArrow('>')
->prevArrow('<')
->noCalendar(true)
->position(\Coolsam\FilamentFlatpickr\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