bladewindUI

Datepicker

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

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

                
                    <x-bladewind.datepicker 
                        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.

                
                    <x-bladewind.datepicker 
                        type="range" 
                        default_date_from="2021-12-03" 
                        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

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

 

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 lang/en/datepicker.php, lang/fr/datepicker.php and lang/it/datepicker.php

The source javascript file for this component is available in public/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="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>