Skip to main content
The Date component renders a date input with an integrated date picker, calendar icon, and clear button. It extends the base Input component with date-specific functionality.

​
Basic Usage

<x-forms::date
    name="birth_date"
    label="Birth Date"
/>

​
Attributes

​
name
string
required
The name attribute for the input field.
​
label
string
default:""
The label text displayed above the input. If empty, a label will be auto-generated from the name.
​
model
Model|null
default:"null"
The Eloquent model instance to bind the input to. When provided, the component will automatically populate the value from the model.
​
default
mixed
default:"null"
Default value for the input when no model or old value exists.
​
dateFormat
string
default:""
Custom date format for displaying the value. When empty, uses default formatting. Accepts PHP date format strings (e.g., Y-m-d, d/m/Y, m/d/Y).
​
icon
string
default:""
Custom icon class for the calendar icon. Defaults to framework-configured icon:
  • Bootstrap 5: fa-regular fa-calendar
  • Material Admin 26: zmdi zmdi-calendar
​
clearIcon
string
default:""
Custom icon class for the clear button. Defaults to framework-configured icon:
  • Bootstrap 5: fa-regular fa-close
  • Material Admin 26: zmdi zmdi-close
​
clearBtnClass
string
default:""
Custom CSS classes for the clear button. Defaults to framework-configured classes:
  • Bootstrap 5: btn btn-outline-secondary btn-date-clear disable-w-input
  • Material Admin 26: text-body btn-date-clear disable-w-input
​
iconWrapperClass
string
default:""
CSS classes for the icon wrapper element. Defaults to date-icon-wrapper.
​
showErrors
boolean
default:"true"
Display validation errors below the input.
​
showLabel
boolean
default:"true"
Show or hide the label element.
​
placeholder
string
default:""
Placeholder text for the input. Auto-generated from label if showPlaceholder is true.
​
showPlaceholder
boolean
default:"false"
Automatically generate placeholder from label.
​
required
boolean
default:"false"
Mark the field as required with an asterisk in the label.
​
inline
boolean
default:"false"
Render the input in horizontal/inline layout.
​
floating
boolean
default:"false"
Use Bootstrap floating label style.
​
inlineLabelClass
string
default:""
Custom CSS classes for inline label. Defaults to framework configuration.
​
inlineInputClass
string
default:""
Custom CSS classes for inline input wrapper. Defaults to framework configuration.
​
showJsErrors
boolean
default:"false"
Enable JavaScript validation error display.
​
framework
string
default:""
Override the default CSS framework. Options: bootstrap-5, material-admin-26.

​
Examples

​
Basic Date Input

<x-forms::date
    name="start_date"
    label="Start Date"
    :required="true"
/>

​
With Model Binding

<x-forms::date
    name="published_at"
    label="Publication Date"
    :model="$article"
/>

​
Custom Date Format

{{-- Display as DD/MM/YYYY --}}
<x-forms::date
    name="event_date"
    label="Event Date"
    dateFormat="d/m/Y"
/>

{{-- Display as Month DD, YYYY --}}
<x-forms::date
    name="deadline"
    label="Deadline"
    dateFormat="F d, Y"
/>

​
With Custom Icons

<x-forms::date
    name="appointment_date"
    label="Appointment Date"
    icon="fas fa-calendar-alt"
    clearIcon="fas fa-times"
/>

​
Inline Layout

<x-forms::date
    name="birth_date"
    label="Birth Date"
    :inline="true"
/>

​
Floating Label

<x-forms::date
    name="registration_date"
    label="Registration Date"
    :floating="true"
/>

​
With Placeholder

<x-forms::date
    name="due_date"
    label="Due Date"
    placeholder="Select a date"
/>

​
With Default Value

{{-- Default to today --}}
<x-forms::date
    name="order_date"
    label="Order Date"
    :default="now()"
/>

{{-- Default to specific date --}}
<x-forms::date
    name="created_date"
    label="Created Date"
    :default="\Carbon\Carbon::parse('2024-01-01')"
/>

​
With Additional Attributes

<x-forms::date
    name="availability_date"
    label="Available From"
    class="custom-date-input"
    id="custom-date-id"
    data-min-date="2024-01-01"
    data-max-date="2024-12-31"
/>

​
Configuration

The Date component uses configuration from config/forms.php:

​
Eloquent Date Casting

'use_eloquent_date_casting' => false,
When enabled, date inputs automatically cast values from Eloquent models to the appropriate format for the date picker.

​
Framework Icon Settings

'frameworks' => [
    'bootstrap-5' => [
        'icon-prefix' => 'fa-regular',
        'date-icon' => 'fa-calendar',
        'date-icon-wrapper-class' => 'date-icon-wrapper',
        'date-clear-icon' => 'fa-close',
        'date-clear-btn-class' => 'btn btn-outline-secondary btn-date-clear disable-w-input',
    ],
    
    'material-admin-26' => [
        'icon-prefix' => 'zmdi',
        'date-icon' => 'zmdi-calendar',
        'date-icon-wrapper-class' => 'date-icon-wrapper',
        'date-clear-icon' => 'zmdi-close',
        'date-clear-btn-class' => 'text-body btn-date-clear disable-w-input',
    ]
]

​
Implementation Details

The Date component:
  • Renders with the date-picker CSS class for JavaScript initialization
  • Displays a calendar icon in an input group prepend
  • Includes a clear button to reset the date value
  • Supports date formatting via the dateFormat attribute
  • Extends the base Input component functionality
  • Automatically handles Eloquent model date casting when configured
Source: src/Views/Components/Date.php:9 View: resources/views/bootstrap-5/input.blade.php:6

Build docs developers (and LLMs) love

Get started for freeTalk to us