Datepicker

Display a datepicker so user can select a date. The datepicker component is locale friendly. Months and days of the week are translated.

Select a date

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

Select a date

        
            <div class="w-40">
                <x-bladewind::datepicker placeholder="Invoice Date"  />
            </div>

Range Calendar

The range datepicker allows you to select a range of dates by setting range="true". In the input field, the range of dates selected are separated with a dash (-). For example, a selected date range will be displayed in the input as 2025-01-10 - 2025-01-31.

Select a date

        
            <x-bladewind::datepicker range="true"  />

Show As a Required Field

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

Select a date

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

Select a date

        
            <x-bladewind::datepicker name="date1" type="range" format="dd-mm-yyyy" />

Select a date

        
            <x-bladewind::datepicker name="date2" format="mm-dd-yyyy" />

Select a date

        
            <x-bladewind::datepicker name="date3" format="D d M, Y" type="range" />

Select a date

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

Select a date

        
            <x-bladewind::datepicker selected_value="2021-12-03"  />

It is possible to have default dates for a range datepicker also.

Select a date

        
            <x-bladewind::datepicker range="true" selected_value="2021-12-03 - 2022-01-03"  />

Min and Max Dates

Setting minimum and maximum dates restrict the datepicker to display dates only within these specified dates. The min_date attribute allows you to set the accepted minimum date. Any dates before this date will be disabled and grayed out. The max_date attribute allows you to set the accepted maximum date. Any dates after this date will be disabled and grayed out.

Select a date

        
            <x-bladewind::datepicker min_date="2025-07-21" />

Select a date

        
            <x-bladewind::datepicker max_date="2025-07-31" />

Select a date

        
            <x-bladewind::datepicker min_date="2025-07-01" max_date="2025-07-31" />

Full List Of Attributes

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

IMPORTANT: All component text/labels can be found in lang/bladewind.php. You can translate these into your preferred languages

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.
range	false	Allow range selection. `true` `false`
selected_value	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="" ../>`
min_date	blank	Restrict the date to start from this. Any dates before this will be disabled and grayed out.
max_date	blank	Restrict the date to end at this. Any dates after this will be disabled and grayed out.
format	yyyy-mm-dd	How date should be formatted. `yyyy-mm-dd` `dd-mm-yyyy` `mm-dd-yyyy` `yyyy/mm/dd` `dd/mm/yyyy` `mm/dd/yyyy` `D d M, Y`
placeholder	Select a date	Placeholder text to display
label	Select a date	Label 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	sunday	Choose between Sunday and Monday as the first day of the week. `sunday` `monday`
class	bw-datepicker	Any additional css classes can be added using this attribute.
nonce	null	Used when implementing context security policies and require to pass a nonce to inline scripts. For convenience, you can set your `nonce` value in the `config/bladewind.php` file under the "script" key. This value will be used everywhere nonce is required.
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`

Calendar with all attributes defined


    <x-bladewind::datepicker
        name="invoice_date"
        range="true"
        required="false"
        placeholder="Invoice Date"
        selected_value=""
        format="dd/mm/yyyy"
        min_date="01/11/2025"
        max_date="01/12/2025"
        week_starts="monday"
        size="big"
        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/[lang]/datepicker.php

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

Read the notes on how to modify the Calendar translations