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.php
vendor/mkocansey/bladewind/lang/(en|fr|it|de)/datepicker.php
public/vendor/bladewind/js/datepicker.js
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Read the notes on how to modify the Datepicker translations.