logo
v2.5.8

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 you will find on airline websites. 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"  />
        
    

Validating The Range Picker

The date range picker comes with optional date validation. This validation only checks to ensure the end date is not less than the start date. To enforce validation of the date range picker, set validate="true". This is only applied if type="range".

When you activate validation, you will need to provide the message to be displayed when a user selects an end date that is less than the start date. This is provided as an option to make it translatable. Set validation_message="your message here"

        
            <x-bladewind::datepicker
                type="range"
                date_from_label="task starts"
                date_to_label="task due"
                validate="true"
                validation_message="Seriously!, you know your task cannot end before you even got started"  />
        
    

By default, the error validation message is displayed in the BladewindUI notification component. You will need to ensure you have this on your page for the error message to be visible. If you prefer to display the error message inline, under the date fields, simply set show_error_inline="true"

The validation is handled by the compareDates(date1_field, date2_field, error_message, show_error_inline) helper function and returns a boolean.

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
week_starts sun Choose between Sunday and Monday as the first day of the week. The week_starts value defined by the first datepicker on your page is applied to all other datepickers on the page.
sun mon
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"
                week_starts="mon"
                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/(ar|en|cn|de|fr|it)/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="//unpkg.com/alpinejs"></script>

Read the notes on how to modify the Datepicker translations.