> ## Documentation Index > Fetch the complete documentation index at: https://flex-fields.bjanczak.com/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Examples target Filament 5. Verify optional dependencies before configuring integrations. > Upload transfer completion, permanent storage and record acceptance are separate milestones. Native and Spatie image conversions retain the original. # Months, years & duration > Choose partial calendar periods or elapsed time without wrapping at midnight. ## Month picker ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexMonthPicker; FlexMonthPicker::make('billing_month') ->label('Billing month') ->displayFormat('F Y') ->default('2026-10'); ``` The month grid opens directly. Saved values use `Y-m`; display defaults to `m/Y`. A month represents the whole period, not an individual day. ## Month labels ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexMonthPicker::make('month')->monthDisplay('numeric'); FlexMonthPicker::make('month')->monthDisplay('short')->locale('pl'); FlexMonthPicker::make('month')->monthDisplay('long')->locale('pl'); FlexMonthPicker::make('month')->monthDisplay('long')->showYearSegment(false); ``` These produce numeric, abbreviated or full month names. Hiding the year changes display only; the saved month still includes a year. Keep the full year visible if the user must distinguish periods across years. ## Month bounds ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexMonthPicker::make('month') ->minValue('2026-01') ->maxValue('2026-12') ->required(); ``` For period availability, a month is checked through its first day. A year is checked through January 1. Apply `isDateUnavailable()` to those representative dates if you need to disable whole periods. Month/year fields support Gregorian partial storage; alternate calendar systems are available on full-date calendars. ## Year picker ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexYearPicker; FlexYearPicker::make('year') ->label('Reporting year') ->minValue('2020') ->maxValue('2030') ->default('2026'); ``` The year grid opens directly. Display and storage default to `Y`. Years 1–9999 are supported. ## Guided period entry ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexMonthPicker::make('month')->editable()->displayFormat('m/Y'); FlexYearPicker::make('year')->editable(); ``` Numeric segment editing follows the same keyboard behavior as full dates. `inline()`, `clearable()`, `closeOnSelect()`, `size()`, `variant()` and locale configuration are also available. ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexMonthPicker::make('month')->inline()->closeOnSelect(false); FlexYearPicker::make('year')->clearable(false)->size('sm')->variant('secondary'); ``` ## Elapsed duration ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDurationField; FlexDurationField::make('duration') ->label('Duration') ->default('26:30'); ``` A duration has no date, timezone or AM/PM. Hours do not wrap at 24. Enter `HH:mm` or enable seconds for `HH:mm:ss`. Up to 99,999 hours are supported. Negative durations and minutes/seconds over 59 are invalid. ## Increment controls ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDurationField::make('duration') ->durationStep(900) ->minValue('00:15') ->maxValue('100:00'); ``` `durationStep()` is measured in seconds. The default is 60 seconds. Without visible seconds, the step must be a positive multiple of 60. Buttons and ArrowUp/ArrowDown adjust the value within the configured bounds. ## Seconds ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDurationField::make('duration') ->showSeconds() ->durationStep(5) ->default('02:30:15'); ``` Enabling seconds changes display/storage to `H:i:s`. Arbitrary display patterns and 12-hour formatting are not supported for elapsed duration. ## Keep stored seconds hidden ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDurationField::make('duration') ->storageFormat('H:i:s') ->default('02:30:15'); ``` Display remains `02:30`. Leaving this unchanged preserves the stored 15 seconds. Use `showSeconds()` if the visitor needs to inspect or edit them. ## Required and bounded ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDurationField::make('duration') ->required() ->minValue('00:30') ->maxValue('08:00'); ``` Bounds and formats are checked on form validation. An empty optional duration saves `null`; malformed text fails validation. Steps determine button increments rather than forcing typed values to that interval. ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDurationField::make('duration')->disabled(); FlexDurationField::make('duration')->readOnly(); FlexDurationField::make('duration')->size('lg')->variant('flat')->focusOutline(); ``` See [configuration](https://flex-fields.bjanczak.com/docs/date-time-configuration.md) for the complete option list and [events](https://flex-fields.bjanczak.com/docs/date-time-events-and-validation.md) for callbacks. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.