# Datetimepicker
<x-boilerplate::datetimepicker name="date" label="Date" />
Will render
# Attributes
Attributes that can be used with this component :
Option | Type | Default | Description |
---|---|---|---|
name | string | null | Input name (required) |
value | mixed | null | Value of input can be a string (ISO 8601) or a Carbon object |
format | string | "L" | Date format for display, see momentjs doc for valid formats (opens new window) |
id | string | autogenerated | Id of the input field |
label | string | null | Input label, can be a translation string |
use-current | boolean | false | On show, will set the picker to the current date/time. |
show-clear | boolean | false | If true, will display a clear button |
show-close | boolean | false | If true, will display a close button |
show-today | boolean | false | If true, will display a button to select the current date |
options | string | Empty string | Datepicker options, see tempusdominus options (opens new window) |
help | string | null | Help message that will be displayed under the input field |
prepend-text | string | Empty string | Text that will be added on the left side of the input, can be a font-awesome icon class |
append-text | string | Empty string | Text that will be added on the right side of the input, can be a font-awesome icon class |
group-id | string | null | ID that will be added to form-group |
group-class | string | null | Additionnal class that will be added to form-group |
class | string | Empty string | Additionnal class that will be added to the input field |
# Format
Format attribute value will dictate what components are shown, e.g. L
will not display the time picker but L HH:mm:ss
will do it.
However, the format that will be sent when posting will always be the international format : yyyy-mm-dd hh:mm:ss
# Additionnal options
Additionnal options can be defined by setting them with the options
attribute.
<x-boilerplate::datetimepicker name="date" options="stepping:5,viewMode:'years'" />
# Value
To define the default date, you can set the value
attribute with a string or an instance of Carbon.
<x-boilerplate::datetimepicker name="date" value="2021-09-08" />
<x-boilerplate::datetimepicker name="date" value="2021-09-08 13:40:05" />
<x-boilerplate::datetimepicker name="date" :value="\Illuminate\Support\Carbon::createFromFormat('Y-m-d', '2021-09-08')" />
<x-boilerplate::datetimepicker name="date" :value="now()" />
# Laravel 6
Laravel 6 does not support Blade x components, but you can use the @component
directive instead :
@component('boilerplate::datetimepicker', ['name' => 'date']) @endcomponent
← Daterangepicker Form →