#MadeWithTwill Demo Chat Blog Guides Docs

Datepicker

Content

Datepicker

screenshot

1DatePicker::make()
2    ->name('event_date')
1<x-twill::date-picker
2    name="event_date"
3    label="Event date"
4    :minDate="\Carbon\Carbon::now()->format('Y-m-d H:i)"
5    maxDate="2030-01-01 12:00"
6/>
1@formField('date_picker', [
2    'name' => 'event_date',
3    'label' => 'Event date',
4    'minDate' => '2017-09-10 12:00',
5    'maxDate' => '2017-12-10 12:00'
6])
Option Description Type/values Default value
name Name of the field string
label Label of the field string
minDate Minimum selectable date string
maxDate Maximum selectable date string
withTime Define if the field will display the time selector boolean true
time24Hr Pick time with a 24h picker instead of AM/PM boolean false
allowClear Adds a button to clear the field boolean false
allowInput Allow manually editing the selected date in the field boolean false
altFormat Format used by flatpickr string F j, Y
hourIncrement Time picker hours increment number 1
minuteIncrement Time picker minutes increment number 30
note Hint message displayed above the field string
required Displays an indicator that this field is required
A backend validation rule is required to prevent users from saving		 boolean false
disabled Disables the field boolean false

A migration to save a date_picker field would be:

 1Schema::table('posts', function (Blueprint $table) {
 2    ...
 3    $table->date('event_date')->nullable();
 4    ...
 5});
 6// OR
 7Schema::table('posts', function (Blueprint $table) {
 8    ...
 9    $table->dateTime('event_date')->nullable();
10    ...
11});

When used in a block, no migration is needed.

Timepicker

1// TODO
1<x-twill::time-picker
2    name="event_time"
3    label="Event time"
4/>
1@formField('time_picker', [
2    'name' => 'event_time',
3    'label' => 'Event time',
4])
Option Description Type/values Default value
name Name of the field string
label Label of the field string
time24Hr Pick time with a 24h picker instead of AM/PM boolean false
allowClear Adds a button to clear the field boolean false
allowInput Allow manually editing the selected date in the field boolean false
hourIncrement Time picker hours increment number 1
minuteIncrement Time picker minutes increment number 30
altFormat Format used by flatpickr string h:i
note Hint message displayed above the field string
required Displays an indicator that this field is required
A backend validation rule is required to prevent users from saving		 boolean false

A migration to save a time_picker field would be:

 1Schema::table('posts', function (Blueprint $table) {
 2    ...
 3    $table->time('event_time')->nullable();
 4    ...
 5});
 6// OR, if you are merging with a date field
 7Schema::table('posts', function (Blueprint $table) {
 8    ...
 9    $table->dateTime('event_date')->nullable();
10    ...
11});

In addition to that you need to setup $dates => ['event_date'] in your module.

When used in a block, no migration is needed.