Display a calendar so user can select a date. The calendar component is locale friendly. Months and days are translated.

This component builds on the code by mithicher available here

                    <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"  />

Range Datepicker

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".

                        date_from_label="start date"
                        date_to_label="end date" />

Show As a Required Field

An asterisk is appended to the placeholder text when required="true".

                    <x-bladewind.datepicker required="true"  />

Date Formats

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" />

With Default Values

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.

                        default_date_to="2022-01-03"  />



Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Datepicker component.

IMPORTANT: Projects running Laravel 8 please read this

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.


Datepicker with all attributes defined

                        placeholder="Invoice Date"
                        class="shadow-sm" />


The source file for this component is available in resources > views > components > bladewind > datepicker.blade.php

The source language (translation) files for this component are available in vendor/mkocansey/bladewind/lang/(en|fr|it|de)/datepicker.php

The source javascript file for this component is available in public/vendor/bladewind/js/datepicker.js

This component REQUIRES AlpineJs. This is not included in the library so you will need to include this for the datepicker to work. <script defer src=""></script>


Read the notes on how to modify the Datepicker translations.