Using jQueryDateTimePicker with a Laravel Livewire Component.

I have a large form. In one section of the form, I use a Livewire component to fill in a name, address, phone number, date of hire, and date of birth. It works great. But I may need to override some values. For instance... the date of hire (doh). Throughout my entire project, I use the jQueryDateTime Picker. In fact, I have other date fields outside the Livewire component that use it in the same form. So it is already loaded into the blade page where the component resides. Here is the javascript that already exists:

    <script>
        // Initialize datetimepickers
        $('#injurydt').datetimepicker({
            value: new Date(),
            mask: '99/99/9999 99:99',
            timepicker: true,
            format: 'm/d/Y H:i',
            dayOfWeekStart: 1,
            scrollMonth: false,
            scrollTime: false,
            scrollInput: false,
            lang: 'en',
            step: 10

        });
        $('#treatmentdt').datetimepicker({
            value: null,
            mask: '99/99/9999 99:99',
            timepicker: true,
            format: 'm/d/Y H:i',
            dayOfWeekStart: 1,
            scrollMonth: false,
            scrollTime: false,
            scrollInput: false,
            lang: 'en',
            step: 10

        });
        $('#notificationdt').datetimepicker({
            value: null,
            mask: '99/99/9999 99:99',
            timepicker: true,
            format: 'm/d/Y H:i',
            dayOfWeekStart: 1,
            scrollMonth: false,
            scrollTime: false,
            scrollInput: false,
            lang: 'en',
            step: 10

        });

    </script>

Is there a way I can use this within the Livewire component for the dob and doh fields? Here are the two Livewire inputs for the dob and doh fields:

<div class="row">
                    <div class="col-6">
                        <label class="form-label" for="doh">Date of Hire / Start</label>
                        <input type="date" id="doh" name="doh" placeholder="mm/dd/yyyy"
                            class="form-control
                                                   @error('doh') is-invalid @enderror"
                            value="{{ $user->doh }}" wire:model="doh">
                        @error('doh')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label" for="dob">Date of Birth</label>
                        <input type="date" id="dob" name="dob"
                            class="form-control
                                                   @error('dob') is-invalid @enderror"
                            value="{{ $user->dob }}" wire:model="dob">
                        @error('dob')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

Thanks

LaryAI

2 years ago

Level 58

To use the jQueryDateTimePicker within the Livewire component for the dob and doh fields, you can follow these steps:

Install the jQueryDateTimePicker library if you haven't already. You can use npm or include it directly in your HTML file.
Add Livewire directives to the dob and doh input fields to enable Livewire's two-way data binding.
Add a Livewire wire:ignore directive to the dob and doh input fields to prevent Livewire from updating them.
Add a Livewire wire:ignore directive to the script tag that initializes the datetimepickers to prevent Livewire from updating it.
Create a Livewire method to handle the initialization of the datetimepickers.

Here's an example of how you can modify your code to achieve this:

<div class="row">
    <div class="col-6">
        <label class="form-label" for="doh">Date of Hire / Start</label>
        <input type="text" id="doh" name="doh" placeholder="mm/dd/yyyy"
            class="form-control @error('doh') is-invalid @enderror"
            value="{{ $user->doh }}" wire:model="doh" wire:ignore>
        @error('doh')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
    <div class="col-6">
        <label class="form-label" for="dob">Date of Birth</label>
        <input type="text" id="dob" name="dob"
            class="form-control @error('dob') is-invalid @enderror"
            value="{{ $user->dob }}" wire:model="dob" wire:ignore>
        @error('dob')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('livewire:load', function () {
            initializeDateTimePickers();
        });

        function initializeDateTimePickers() {
            $('#doh').datetimepicker({
                value: new Date(),
                mask: '99/99/9999 99:99',
                timepicker: true,
                format: 'm/d/Y H:i',
                dayOfWeekStart: 1,
                scrollMonth: false,
                scrollTime: false,
                scrollInput: false,
                lang: 'en',
                step: 10
            });

            $('#dob').datetimepicker({
                value: null,
                mask: '99/99/9999 99:99',
                timepicker: true,
                format: 'm/d/Y H:i',
                dayOfWeekStart: 1,
                scrollMonth: false,
                scrollTime: false,
                scrollInput: false,
                lang: 'en',
                step: 10
            });
        }
    </script>
@endpush

Make sure to include the necessary JavaScript and CSS files for the jQueryDateTimePicker library in your HTML file.

Note: If you're using Laravel Mix or any other build tool, you may need to adjust the way you include the jQueryDateTimePicker library.

jlrdw

2 years ago

Level 75

Just curious, why not the html 5 datepicker?

https://laracasts.com/discuss/channels/laravel/date-picker-3

1 like

phayes0289

2 years ago

Level 5

You almost sold me. But in reviewing the HTML 5 picker I found the only way to use military (24-hour) time is to change your system clock. After giving it some thought, I did not think that would be a huge deal since most firefighters probably already use it. So I set my iPhone to 24-hours and it worked great. But not so on the Mac. It still uses 12 hour time. Ugh.

jlrdw

2 years ago

Level 75

@phayes0289 with input type="datetime-local" if you enter 22:30 hour and minute it will show 10:30 pm. But 22 for example can still be entered.

You do what's needed in the request to display as needed.

But always store in YYYY-MM-DD format if using Mysql.

phayes0289

2 years ago

Level 5

Yes... I understand the format to save it in. I am not a fan of switching the time on the user, though. I fear it may throw them off. Everything, and I do mean everything is in 24-hour time for firefighters. Most firefighters even work a 24-hour shift. 24-hour time becomes a way of thinking. So I want to keep it consistent.

jlrdw

2 years ago

Level 75

@phayes0289 Just a thought, you could have just the datapicker for date only and a custom input just to the right of that for the time (your 24 hour time). Then combine and handle as needed when getting it in the request.

Normally when I have such things to work out I play around with it with some trial and error.

Please or to participate in this conversation.