bladewindUI
Display a calendar so user can select a date. The calendar component is locale friendly. Months and days are translated.
<x-bladewind.datepicker />
By default the datepicker fills up the width of its parent container. You can however specify a width of your choice using the datepicker's css attribute.
You can also change the placeholder text from the default Select a date.
<div class="w-40">
<x-bladewind.datepicker placeholder="Invoice Date" />
</div>
This range datepicker isn't your typical date range selection. This option simply saves you from manually embedding the datepicker two times.
Specifying type="range" will create two separate datepicker boxes for start and end dates.
<x-bladewind.datepicker type="range" />
The default placeholder texts for the range datepicker are From and To. These can however, be modified using the date_from_label and date_to_label attributes. These attributes only work if type="range".
<x-bladewind.datepicker
type="range"
date_from_label="start date"
date_to_label="end date" />
An asterisk is appended to the placeholder text when required="true".
<x-bladewind.datepicker required="true" />
You can specify how you want dates selected in the datepicker to be displayed. There are four options to pick from.
The default format is format="yyyy-mm-dd". When using a range datepicker, the format you specify is applied to both datepickers.
<x-bladewind.datepicker name="date1" type="range" format="dd-mm-yyyy" />
<x-bladewind.datepicker name="date2" format="mm-dd-yyyy" />
<x-bladewind.datepicker name="date3" format="D d M, Y" type="range" />
<x-bladewind.datepicker name="date4" format="yyyy-mm-dd" />
There are times you will want the datepicker to load prepopulated with a default value. This is useful when in edit mode or when using filters and you want to show the user what dates they filtered by.
<x-bladewind.datepicker default_date="2021-12-03" />
It is possible to have default dates for a range datepicker also.
<x-bladewind.datepicker
type="range"
default_date_from="2021-12-03"
default_date_to="2022-01-03" />
The table below shows a comprehensive list of all the attributes available for the Datepicker component.
| Option | Default | Available Values |
|---|---|---|
| name | bw-datepicker | This name can be accessed when the input is submitted in the form. The name is also available as part of the css classes. |
| type | single | single range |
| default_date | blank | In case you are editing a form, the value passed will be set on the value attribute of the datepicker input.
<input type="text" value="" ../> |
| default_date_from | blank | Default date to set for the From date when using the range datepicker. |
| default_date_to | blank | Default date to set for the To date when using the range datepicker. |
| date_from_label | From | Placeholder text to display for the From date. Applicable only to range datepickers. |
| date_to_label | To | Placeholder text to display for the To date. Applicable only to range datepickers. |
| format | yyyy-mm-dd | How date should be formatted.yyyy-mm-dd
dd-mm-yyyy mm-dd-yyyy
D d M, Y |
| placeholder | Select a date | Placeholder text to display |
| required | false | Determines if the placeholder text should have an asterisk appended to it or not. Value needs to be set as a string not boolean.true false |
| class | bw-datepicker | Any additonal css classes can be added using this attribute. |
<x-bladewind.datepicker
name="invoice_date"
type="single"
required="false"
placeholder="Invoice Date"
date_from=""
date_to=""
default_date=""
has_label="true"
class="shadow-sm" />
resources > views > components > bladewind > datepicker.blade.phplang/en/datepicker.php, lang/fr/datepicker.php and lang/it/datepicker.phppublic/bladewind/js/datepicker.js<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>