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="2026-09-09" />

Select a date

        
            <x-bladewind::datepicker max_date="2026-09-30" />

Select a date

        
            <x-bladewind::datepicker min_date="2026-09-01" max_date="2026-09-30" />

Laravel Form State

When validation fails, Laravel redirects back with the submitted values flashed to the session and the messages in $errors. The Datepicker component can read both for you, so you no longer write {{ old('...') }} and an error block on every single field.

        
<x-bladewind::datepicker
    name="starts_on"
    label="Start date"
    fill_from_old="true"
    show_validation_error="true" />

fill_from_old repopulates the field from old(). show_validation_error gives the field its error state and renders $errors->first() underneath it. Add error_bag if you validate into a named bag.

Both are off by default. If your form already prints its own validation messages, switching this on without removing them would print every message twice.

Turning it on for every form

Rather than setting the attributes field by field, set them once in your config/bladewind.php and every form component follows.

        
// config/bladewind.php
'forms' => [
    'fill_from_old' => true,
    'show_validation_error' => true,
    'error_bag' => null,
],

An attribute on a single field always wins over the config, so you can opt one field out with show_validation_error="false".

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`
fill_from_old	false	Repopulate the field from `old()` when Laravel redirects back after a failed validation. Defaults to the `bladewind.forms.fill_from_old` config value. `true` `false`
show_validation_error	false	Give the field its error state and render `$errors->first()` beneath it. Defaults to the `bladewind.forms.show_validation_error` config value. `true` `false`
error_bag	null	Which error bag to read when `show_validation_error` is on. Leave it unset to use Laravel's default bag.

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/bladewindui/ui/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