A date, dateTime, Time, Range Date picker with livewire and AlpineJs + TailwindCss

Here is a date, dateTime and date range picker for livewire made for Tall Stack

Support us

Here is a date, dateTime and date range picker for livewire made for Tall Stack

Installation

You can install the package via composer:

composer require webplusmultimedia/date-time-range-picker

Add the following settings to your Tailwindcss config file, tailwind.config.js

module.exports = {
    presets: [
        require('./vendor/webplusmultimedia/date-time-range-picker/tailwind.config.js')
    ],
    content: [
        '...',
        /* Date time Range */
        './vendor/webplusmultimedia/date-time-range-picker/js/**/*.js',
        './vendor/webplusmultimedia/date-time-range-picker/resources/views/**/*.blade.php',
    ],

    theme: {}
}

In your ./resources/js/app.js, import the js file

import './../../vendor/webplusmultimedia/filemanager/resources/dist/js/date_time_range'

Changing color theme

You can customize the color theme by changing just one variable in your tailwind.config.js

const colors = require('tailwindcss/colors')
 
module.exports = {
    ...
    theme: {
        extend: {
            colors: {
                ...
                'primary-datepicker' : colors.cyan // Or what ever you want
            },
        },
    },
    ...
}

Optionally, you can publish the views using, but don't need that.

php artisan vendor:publish --tag="date-time-range-picker-views"

Usage

In your blade livewire view :

<div class="pt-5">
    <x-webplusm-date-time-range-picker type="range" label="Dates de formation" 
                                       wire:model="date" 
    />
</div>

Component attributes :

• type : {string} (date by default) date, datetime or range
• label : {string} (null by default) the Label to play
• minDate and maxDate : {ISO8601 (Carbon\CarbonInterface|null)} (null by default), if you need restricting dates
• lang : {dateString} (fr by default(e.g : fr-FR ...))
• minTime : {int} (7(h) by default) , minimum time to reach
• maxTime : {int} (17(h) by default) , maximum time to reach
• intervalMinute : {int} (5 by default) , interval up/down for minutes (time and datetime type)

Testing

Coming sooner

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• webplusm

License

The MIT License (MIT). Please see License File for more information.