logo
v2.6.3

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". Also, we introduced stacked="true" to stack the datepickers vertically.


        
            <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 the x-bladewind.notification component 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() helper function and returns a boolean (0 or 1). False (0) means there was an error. The range datepicker places the start date next to the end date. There are cases where your display will require you to have your end date below the start. In this case you will need to use two datepickers. You can still use this helper function to validate your start and end dates.

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
onblur blank Custom function to call when the datepicker loses focus. This can be the entire function with parameters. Bladewind does not interfere with this.
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.
validate false Applied if type="range" to enforce if the start date should not be greater than the end date.
true false
validation_message Your end date cannot be less than your start date Applied if type="range". Message to display if there is a validation error.
show_error_inline false Applied if type="range" to specify how the error should be displayed. By default, it is displayed in the Bladewind Notification component.
true false
use_placeholder true Applied if type="range" to specify if the placeholder should be explicitly used instead of labels.
true false
stacked true Applied if type="range" to specify if the datepickers should be stacked vertically.
true false
size medium Sizing of the input to match button sizes in case you have a datepicker and a button on one line.
tiny smallregular big

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"
                validate="false"
                show_error_inline="true"
                stacked="true"
                use_placeholder="false"
                validation_message="end date before start date! Really?"
                onblur="copyDate('copy_from', 'copy_to')"
                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.