Date & Time

Native date, time, and datetime-local inputs.

Examples

Date

blade

<x-plume::form 
    formData="{ 'birthdate': '' }">
    <div class="max-w-sm">
        <x-plume::form.date name="birthdate" model="birthdate" label="Birth Date" />
    </div>
</x-plume::form>

Time

blade

<x-plume::form 
    formData="{ 'alarm': '' }">
    <div class="max-w-sm">
        <x-plume::form.time name="alarm" model="alarm" label="Set Alarm" />
    </div>
</x-plume::form>

DateTime

blade

<x-plume::form 
    formData="{ 'meeting': '' }">
    <div class="max-w-sm">
        <x-plume::form.datetime name="meeting" model="meeting" label="Meeting Time" />
    </div>
</x-plume::form>

Properties

Date

Prop	Type	Default	Description
label	string	null	The label for the date input.
name	string	null	HTML name attribute.
id	string	null	HTML id attribute. Auto-generated from name if not provided.
model	string	null	AlpineJS model name for two-way binding.
value	string	''	Initial date value (YYYY-MM-DD). Ignored if $model is used.
placeholder	string	''	Placeholder text (browser support varies for type="date").

Time

Prop	Type	Default	Description
label	string	null	The label for the time input.
name	string	null	HTML name attribute.
id	string	null	HTML id attribute. Auto-generated from name if not provided.
model	string	null	AlpineJS model name for two-way binding.
value	string	''	Initial time value (HH:mm). Ignored if $model is used.
placeholder	string	''	Placeholder text.

DateTime

Prop	Type	Default	Description
label	string	null	The label for the input.
name	string	null	HTML name attribute.
id	string	null	HTML id attribute. Auto-generated from name if not provided.
model	string	null	AlpineJS model name for two-way binding.
value	string	''	Initial value (YYYY-MM-DDTHH:mm). Ignored if $model is used.
placeholder	string	''	Placeholder text.

Usage

blade

<x-plume::form >
    <x-plume::form.date model="date" label="Date" />
    <x-plume::form.time model="time" label="Time" />
    <x-plume::form.datetime model="datetime" label="Datetime" />
</x-plume::form>