PHPackages                             chengkangzai/filament-mui-date-picker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. chengkangzai/filament-mui-date-picker

ActiveLibrary[Utility & Helpers](/categories/utility)

chengkangzai/filament-mui-date-picker
=====================================

A Filament form field that replicates MUI's DatePicker with full Livewire integration

v3.0.1(1mo ago)0156MITPHPPHP ^8.2CI passing

Since Mar 1Pushed 1mo agoCompare

[ Source](https://github.com/chengkangzai/filament-mui-date-picker)[ Packagist](https://packagist.org/packages/chengkangzai/filament-mui-date-picker)[ Docs](https://github.com/chengkangzai/filament-mui-date-picker)[ GitHub Sponsors](https://github.com/:vendor_name)[ RSS](/packages/chengkangzai-filament-mui-date-picker/feed)WikiDiscussions 5.x Synced 1mo ago

READMEChangelog (6)Dependencies (26)Versions (10)Used By (0)

Filament MUI Date Picker
========================

[](#filament-mui-date-picker)

A [Filament](https://filamentphp.com) form field powered by [MUI X Date Pickers](https://mui.com/x/react-date-pickers/) and React. It renders a fully-featured Material UI date picker inside your Filament panels with seamless Livewire two-way binding, dark mode support, and built-in localization for 40+ languages.

Features
--------

[](#features)

- Material UI date picker rendered via React, embedded inside Filament forms
- Full two-way data binding with Livewire through Alpine.js
- Three picker variants: desktop (popover), mobile (dialog), and static (always-visible)
- Configurable picker views (year, month, day) and opening view
- Min/max date constraints with automatic Laravel validation rules
- Disable specific dates, past dates, or future dates
- 40+ built-in MUI locale translations plus PHP lang file overrides
- Clearable input with optional "Today" button
- Landscape and portrait orientations
- Follows Filament's dark mode and primary color automatically
- Supports `readOnly`, `disabled`, `required`, `placeholder`, and all standard Filament field features
- Display format and storage format can be configured independently

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 11 or 12
- Filament 4.x or 5.x
- Node.js (for building assets during development only)

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require chengkangzai/filament-mui-date-picker
```

Register the plugin in your Filament panel provider:

```
use Cck\FilamentMuiDatePicker\MuiDatePickerPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            MuiDatePickerPlugin::make(),
        ]);
}
```

Optionally, publish the configuration file:

```
php artisan vendor:publish --tag="mui-date-picker-config"
```

To publish and customize translation files:

```
php artisan vendor:publish --tag="mui-date-picker-translations"
```

Basic Usage
-----------

[](#basic-usage)

Add the `MuiDatePicker` field to any Filament form schema:

```
use Cck\FilamentMuiDatePicker\Forms\Components\MuiDatePicker;

MuiDatePicker::make('date')
    ->label('Date')
```

The field stores dates in `Y-m-d` format by default and displays them as `MM/DD/YYYY`.

Configuration Options
---------------------

[](#configuration-options)

### Display Format and Storage Format

[](#display-format-and-storage-format)

The **display format** controls how the date appears in the input field (uses [Day.js tokens](https://day.js.org/docs/en/display/format)). The **storage format** controls how the date is stored in your database (uses PHP date format tokens).

```
MuiDatePicker::make('date')
    ->displayFormat('DD/MM/YYYY')  // Day.js format shown to the user
    ->format('Y-m-d')             // PHP format stored in the database
```

MethodDefaultFormat Type`displayFormat()``MM/DD/YYYY`Day.js`format()``Y-m-d`PHP### Min and Max Dates

[](#min-and-max-dates)

Constrain the selectable date range. These methods automatically add `before_or_equal` and `after_or_equal` Laravel validation rules.

```
use Carbon\Carbon;

MuiDatePicker::make('date')
    ->minDate('2024-01-01')
    ->maxDate('2024-12-31')

// Or with Carbon instances:
MuiDatePicker::make('date')
    ->minDate(now()->startOfMonth())
    ->maxDate(now()->endOfMonth())
```

### Disabled Dates

[](#disabled-dates)

Pass an array of specific dates that cannot be selected:

```
MuiDatePicker::make('date')
    ->disabledDates([
        '2024-12-25',
        '2024-12-31',
        Carbon::parse('2024-01-01'),
    ])
```

### Disable Future / Disable Past

[](#disable-future--disable-past)

Quickly prevent selection of future or past dates:

```
MuiDatePicker::make('date')
    ->disableFuture()  // Only past dates and today

MuiDatePicker::make('date')
    ->disablePast()    // Only today and future dates
```

### Picker Variant

[](#picker-variant)

Choose how the date picker is presented. The default is `desktop`.

```
// Desktop: opens as a popover anchored to the input
MuiDatePicker::make('date')->desktop()

// Mobile: opens as a full-screen dialog
MuiDatePicker::make('date')->mobile()

// Static: renders the calendar inline, always visible
MuiDatePicker::make('date')->staticMode()

// Or use the generic method:
MuiDatePicker::make('date')->variant('mobile')
```

### Picker Views and Opening View

[](#picker-views-and-opening-view)

Control which views (year, month, day) are available and which one the picker opens to:

```
// Only allow year and month selection
MuiDatePicker::make('date')
    ->pickerViews(['year', 'month'])
    ->openTo('year')

// Open directly to year selection, then drill down
MuiDatePicker::make('date')
    ->pickerViews(['year', 'month', 'day'])
    ->openTo('year')
```

### Clearable

[](#clearable)

Allow the user to clear the selected date:

```
MuiDatePicker::make('date')
    ->clearable()
```

### Today Button

[](#today-button)

Show a "Today" button in the picker toolbar for quick selection:

```
MuiDatePicker::make('date')
    ->showTodayButton()
```

### Toolbar

[](#toolbar)

Show or hide the picker toolbar:

```
MuiDatePicker::make('date')
    ->showToolbar()
```

### Close on Date Selection

[](#close-on-date-selection)

By default, the picker closes when a date is selected. You can keep it open:

```
MuiDatePicker::make('date')
    ->closeOnDateSelection(false)
```

### Orientation

[](#orientation)

Control the layout orientation of the picker:

```
MuiDatePicker::make('date')->landscape()
MuiDatePicker::make('date')->portrait()

// Or use the generic method:
MuiDatePicker::make('date')->orientation('landscape')
```

### Reduce Animations

[](#reduce-animations)

Disable picker animations for performance or accessibility:

```
MuiDatePicker::make('date')
    ->reduceAnimations()
```

### Disable Today Highlight

[](#disable-today-highlight)

Remove the visual highlight on today's date in the calendar:

```
MuiDatePicker::make('date')
    ->disableHighlightToday()
```

### Locale

[](#locale)

Set the locale for date formatting and UI text. Falls back to `config('app.locale')`:

```
MuiDatePicker::make('date')
    ->locale('fr')
```

See the [Localization](#localization--i18n) section for full details.

### Locale Text Overrides

[](#locale-text-overrides)

Override specific UI text strings on a per-field basis:

```
MuiDatePicker::make('date')
    ->localeText([
        'cancelButtonLabel' => 'Dismiss',
        'clearButtonLabel' => 'Reset',
        'todayButtonLabel' => 'Jump to today',
    ])
```

### Timezone

[](#timezone)

Set the timezone for date handling. Falls back to `config('app.timezone')`:

```
MuiDatePicker::make('date')
    ->timezone('America/New_York')
```

### First Day of Week

[](#first-day-of-week)

Override the first day of the week (0 = Sunday, 1 = Monday, etc.):

```
MuiDatePicker::make('date')
    ->firstDayOfWeek(1) // Monday
```

### Default Focused Date

[](#default-focused-date)

Set which date the calendar focuses on when opened without a value:

```
MuiDatePicker::make('date')
    ->defaultFocusedDate('2024-06-15')

// Or with Carbon:
MuiDatePicker::make('date')
    ->defaultFocusedDate(now()->addMonth())
```

### Placeholder

[](#placeholder)

Set placeholder text shown when no date is selected:

```
MuiDatePicker::make('date')
    ->placeholder('Select a date...')
```

### Read Only and Disabled

[](#read-only-and-disabled)

```
// Read-only: the user can see the value but cannot change it
MuiDatePicker::make('date')
    ->readOnly()

// Disabled: the field is grayed out and non-interactive
MuiDatePicker::make('date')
    ->disabled()
```

Localization / i18n
-------------------

[](#localization--i18n)

The date picker supports 40+ languages through three layers of localization that merge together. Each layer overrides the one below it.

### Layer 1: Built-in MUI Locale Translations (JavaScript)

[](#layer-1-built-in-mui-locale-translations-javascript)

The following 40 locales ship with built-in MUI translations for all picker UI text (button labels, toolbar titles, accessibility strings, etc.). When you set `->locale('fr')`, MUI's French translations are loaded automatically with no extra configuration:

Locale CodeLanguageLocale CodeLanguage`be`Belarusian`ja`Japanese`bg`Bulgarian`kk`Kazakh`bn` / `bn_BD`Bengali`ko`Korean`ca`Catalan`mk`Macedonian`cs`Czech`nb`Norwegian Bokmal`da`Danish`nl`Dutch`de`German`nn`Norwegian Nynorsk`el`Greek`pl`Polish`en` / `en_GB`English`pt` / `pt_PT`Portuguese`es` / `es_MX`Spanish`pt_BR`Brazilian Portuguese`eu`Basque`ro`Romanian`fa`Persian`ru`Russian`fi`Finnish`sk`Slovak`fr` / `fr_CA`French`sv`Swedish`he`Hebrew`tr`Turkish`hr`Croatian`uk`Ukrainian`hu`Hungarian`ur`Urdu`is`Icelandic`vi`Vietnamese`it`Italian`zh` / `zh_CN` / `zh_HK` / `zh_TW`Chinese### Layer 2: PHP Lang Files (Publishable)

[](#layer-2-php-lang-files-publishable)

For languages not covered by MUI's built-in translations (or to customize the built-in ones), the plugin ships PHP translation files. These are loaded via Laravel's standard translation system and merged on top of Layer 1.

The plugin ships with lang files for these languages:

- `en` -- English
- `ar` -- Arabic
- `ms` -- Malay
- `ta` -- Tamil
- `th` -- Thai
- `hi` -- Hindi
- `id` -- Indonesian
- `sw` -- Swahili
- `fil` -- Filipino
- `km` -- Khmer

To publish and customize these files:

```
php artisan vendor:publish --tag="mui-date-picker-translations"
```

This copies the lang files to `lang/vendor/mui-date-picker/` in your application, where you can edit them freely.

#### Available Translation Keys

[](#available-translation-keys)

Each lang file returns an array with these keys:

```
return [
    'previousMonth' => 'Previous month',
    'nextMonth' => 'Next month',
    'openPreviousView' => 'Open previous view',
    'openNextView' => 'Open next view',
    'cancelButtonLabel' => 'Cancel',
    'clearButtonLabel' => 'Clear',
    'okButtonLabel' => 'OK',
    'todayButtonLabel' => 'Today',
    'datePickerToolbarTitle' => 'Select date',
    'start' => 'Start',
    'end' => 'End',
    'startDate' => 'Start date',
    'endDate' => 'End date',
    'year' => 'Year',
    'month' => 'Month',
    'day' => 'Day',
    'hours' => 'Hours',
    'minutes' => 'Minutes',
    'seconds' => 'Seconds',
    'empty' => 'Empty',
];
```

#### Adding a New Language

[](#adding-a-new-language)

1. Publish the translations (if you have not already).
2. Create a new file at `lang/vendor/mui-date-picker/{locale}/mui-date-picker.php`.
3. Translate all the keys listed above.
4. Set `->locale('{locale}')` on your field or set `config('app.locale')` globally.

### Layer 3: Per-Field `localeText()` Overrides

[](#layer-3-per-field-localetext-overrides)

The highest-priority layer. Use `localeText()` on individual fields to override any translation string:

```
MuiDatePicker::make('date')
    ->locale('fr')
    ->localeText([
        'todayButtonLabel' => "Aujourd'hui",
        'clearButtonLabel' => 'Effacer',
    ])
```

### How the Layers Merge

[](#how-the-layers-merge)

When the picker renders, translations are resolved in this order:

1. MUI's built-in JavaScript translations for the locale (if available)
2. PHP lang file translations are merged on top (from `lang/vendor/mui-date-picker/{locale}/` or the plugin's bundled files)
3. Per-field `localeText()` values are merged last, taking highest priority

This means you can rely on MUI's built-in translations for most languages, customize individual strings through PHP lang files, and apply one-off overrides on specific fields.

Real-World Examples
-------------------

[](#real-world-examples)

### Date of Birth (18+ Required)

[](#date-of-birth-18-required)

```
MuiDatePicker::make('date_of_birth')
    ->label('Date of Birth')
    ->required()
    ->maxDate(now()->subYears(18))
    ->openTo('year')
    ->pickerViews(['year', 'month', 'day'])
    ->displayFormat('DD/MM/YYYY')
    ->placeholder('Select your date of birth...')
    ->disableFuture()
```

### Appointment Booking (Future Dates Only, No Weekends)

[](#appointment-booking-future-dates-only-no-weekends)

```
use Carbon\Carbon;
use Carbon\CarbonPeriod;

// Build a list of weekend dates for the next 6 months
$weekends = collect(CarbonPeriod::create(now(), now()->addMonths(6)))
    ->filter(fn (Carbon $date) => $date->isWeekend())
    ->map(fn (Carbon $date) => $date->format('Y-m-d'))
    ->values()
    ->all();

MuiDatePicker::make('appointment_date')
    ->label('Appointment Date')
    ->required()
    ->disablePast()
    ->disabledDates($weekends)
    ->clearable()
    ->showTodayButton()
    ->placeholder('Choose an available weekday...')
```

### Simple Date Field

[](#simple-date-field)

```
MuiDatePicker::make('date')
    ->label('Date')
```

### Inline Static Calendar

[](#inline-static-calendar)

```
MuiDatePicker::make('event_date')
    ->label('Event Date')
    ->staticMode()
    ->showTodayButton()
    ->clearable()
```

### Localized Date Picker

[](#localized-date-picker)

```
MuiDatePicker::make('date')
    ->label('Tarikh')
    ->locale('ms')
    ->displayFormat('DD/MM/YYYY')
    ->firstDayOfWeek(1)
    ->clearable()
```

Styling
-------

[](#styling)

The date picker automatically adapts to Filament's dark mode and uses your panel's primary color. No additional CSS configuration is needed.

The component uses the following CSS classes if you need to target it for custom styling:

- `.fi-fo-mui-date-picker` -- the outer wrapper
- `.fi-fo-mui-date-picker-container` -- the React mount point

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [chengkangzai](https://github.com/chengkangzai)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance90

Actively maintained with recent releases

Popularity15

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 86.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~4 days

Total

8

Last Release

43d ago

Major Versions

v1.0.0 → 4.x-dev2026-03-01

v1.0.1 → v2.0.12026-03-17

v2.0.1 → v3.0.02026-03-17

v3.0.1 → 5.x-dev2026-03-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/a370741c6674c16bdde48fe05be751779341eea55bf51bd75eb165e146a836fc?d=identicon)[chengkangzai](/maintainers/chengkangzai)

---

Top Contributors

[![chengkangzai](https://avatars.githubusercontent.com/u/43839286?v=4)](https://github.com/chengkangzai "chengkangzai (13 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")

---

Tags

laraveldate pickerfilamentfilament-pluginfilamentphpchengkangzaimui-date-picker

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/chengkangzai-filament-mui-date-picker/health.svg)

```
[![Health](https://phpackages.com/badges/chengkangzai-filament-mui-date-picker/health.svg)](https://phpackages.com/packages/chengkangzai-filament-mui-date-picker)
```

###  Alternatives

[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

33184.7k6](/packages/schmeits-filament-character-counter)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)[defstudio/filament-searchable-input

A searchable autocomplete input for Filament forms

3212.4k](/packages/defstudio-filament-searchable-input)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[jiten14/jitone-ai

jitone-ai is a powerful FilamentPHP plugin that integrates AI-powered features directly into your Filament forms.

213.1k](/packages/jiten14-jitone-ai)[agencetwogether/hookshelper

Simple plugin to toggle display hooks available in current page.

2312.7k](/packages/agencetwogether-hookshelper)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)