Looking for a date time picker for livewire

#1

Hello,

I am looking for a date picker to use in my app that is built with Laravel 8, jetstream, livewire and tailwind css.
Until now I am using the livewire date-picker, but I also need a time picker attached to it.

Thank you in advance.

#2

I’m using flatpickr and have been pretty happy with it.

#3

Take a look here in the docs

#4

Thanks I will take a look.

#5

Thanks, isn’t this only a date picker? I tried it, but I also need a time picker as well in the same instance.

#6

No, it’s got time options.

https://flatpickr.js.org/options/

#7

Thank you, will this work with tailwind css ?

#8

Here’s the blade component I use. I style the input field but not the date widget itself.

@once
    @push('styles')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    @endpush

    @push('head_scripts')
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    @endpush
@endonce

@props(['options' => "{dateFormat:'Y-m-d', altFormat:'F j, Y', altInput:true, }"])

<div wire:ignore>
    <input
        x-data
        x-init="flatpickr($refs.input, {{ $options }} );"
        x-ref="input"
        type="text"
        data-input
        {{ $attributes->merge(['class' => 'block w-full disabled:bg-gray-200 p-2 border border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 sm:text-sm sm:leading-5']) }}
    />
</div>
#9

Hey, thanks that is great.
So I just include the blade component in my pages where I need it ?