Date Picker

Picture a friendly calendar that helps you pick dates effortlessly, whether you're planning events or just keeping track of important dates. It's like having a helpful assistant for all your scheduling needs!

Adding the component

php artisan spur:add forms/date-picker forms/input

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'forms/date-picker',
  'forms/input',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Date Picker 

<x-spur.date-picker/>

Human Readable Date

if altInput is enabled by default the human-readable date format is set to 'F j, Y' but you can assign it to anything from your choice.

<x-spur.date-picker altInput altFormat="j F"/>

Week Numbers

To enable week numbers use weekNumbers attribute

<x-spur.date-picker placeholder="Select Date..." weekNumbers/>

Minimum & Maximum dates

You can restrict the selection of dates beyond certain range by using minDate and maxDate

Date format for minimum and maximum defaults to "Y-m-d" unless you assign different dateFormat

<x-spur.date-picker placeholder="Start Date" minDate="today" maxDate="2025"/>
<x-spur.date-picker placeholder="End Date" minDate="tomorrow" maxDate="2026-12-31"/>

Multiple Dates

You can allow selecting multiple date by using the mode: multiple

by default the separator is ', ' but you can change it by setting separator attribute to anything you want

<x-spur.date-picker placeholder="Select Date..." mode="multiple"/>
<x-spur.date-picker placeholder="Custom Separator" mode="multiple" separator=" | "/>

Date Range

You can allow selecting date range by using the mode: range

<x-spur.date-picker placeholder="Select Date..." mode="range"/>

Date with Time

You can allow selecting time enableTime

You should adjust the dateFormat to match the time

<x-spur.date-picker placeholder="Select Date..." enableTime dateFormat="Y-m-d H:i"/>

Time Picker

You can have a time selector only by disabling the calendar using noCalendar attribute

You should adjust the dateFormat to match the time

<x-spur.date-picker placeholder="Select date..."/>
<x-spur.date-picker placeholder="Select time..." enableTime noCalendar dateFormat="H:i"/>

24 Hours Time

You can change the format to use 24 hours format by using time_24hr attribute

<x-spur.date-picker placeholder="Select time..." enableTime noCalendar dateFormat="H:i" time_24hr/>

With Label and Description

Please select your birthday 

<x-spur.field id="email">
  <x-spur.label>Email Address</x-spur.label>
  <x-spur.input placeholder="Email Address" name="email" />
  <x-spur.description>Please write in your email address here</x-spur.description>
</x-spur.field>