X-Splade-Input Component

The Input Component can be used for all kinds of input, like texts, emails, passwords and dates. The type attribute defaults to text.

<x-splade-form :default="$user">
    <x-splade-input name="username" />
    <x-splade-input name="job_title" label="Your Job Title" />
    <x-splade-input name="email" type="email" placeholder="Your Email Address" />
</x-splade-form>

Flatpickr

The Flatpickr integration comes with a default stylesheet which you should import into the main JavaScript file. If you've used the automatic installer, it has already done this for you.

import "@protonemedia/laravel-splade/dist/style.css";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";

To enable the date picker, add the date attribute to the Input component. You don't have to set the type attribute to date.

<x-splade-input name="published_at" date />

To enable the time picker, add the time attribute to the Input component.

<x-splade-input name="scheduled_at" time />

If you want a date + time picker, add both attributes.

<x-splade-input name="scheduled_at" date time />

If you want to select a date range, add the range attribute.

<x-splade-input name="scheduled_period" date range />

You can instantiate Flatpickr with a custom set of options by passing a JavaScript object to either the date or time attribute. To pass a PHP array, you may use the :date or :time attribute (note the colon).

<x-splade-input name="published_at" date="{ showMonths: 2 }" />
 
<x-splade-input name="published_at" :date="['showMonths' => 2]" />
 
<x-splade-input name="scheduled_at" time="{ time_24hr: false }" />
 
<x-splade-input name="scheduled_at" :time="['time_24hr' => false]" />

Default settings

You may set the default formatting by using static methods on the Input class, for example, in the AppServiceProvider class:

use ProtoneMedia\Splade\Components\Form\Input;
 
Input::defaultDateFormat('d-m-Y H:i');
Input::defaultTimeFormat('H:i');
Input::defaultDatetimeFormat('d-m-Y H:i');

If you want to use Flatpickr for every input element by default, you may use the static defaultFlatpickr method:

Input::defaultFlatpickr();

You may even pass an array with default options to the method:

Input::defaultFlatpickr([
    'showMonths' => 2
]);

Customize Flatpickr styling

Flatpickr uses a Stylus stylesheet to style the library. Our stylesheet extends the vendor stylesheet (of Flatpickr) and adds some Tailwind-specific tweaks. Make sure your bundler handles Stylus stylesheets correctly, for example, by installing stylus. The splade:publish-form-stylesheets Artisan command copies the stylesheet to the resources directory of your app.

npm install stylus -D
 
php artisan splade:publish-form-stylesheets

Then import the stylesheet in your main JavaScript file (instead of the default @protonemedia/laravel-splade/dist/style.css stylesheet):

import "../css/flatpickr.styl"

In a future Splade release, we'll work on migrating the Stylus stylesheet to a more Tailwind-friendly preprocessor (or plain CSS).