Datepicker

Display a calendar so user can select a date. The calendar component is locale friendly. Months and days are translated.

        
            <script src="//unpkg.com/alpinejs" defer></script>
        
    

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

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.

        
            <x-bladewind::datepicker min_date="2024-12-21" />
        
    

        
            <x-bladewind::datepicker max_date="2024-12-31" />
        
    

        
            <x-bladewind::datepicker min_date="2024-12-01" max_date="2024-12-31" />
        
    

Full List Of Attributes

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

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

Read the notes on how to modify the Datepicker translations.