How to use multiple date and time picker inputs in same form tempusdominus-bootstrap-4 datetime picker

I am trying to make multiple date & time picker input using Bootstrap datetimepicker. But when I click one time input other time inputs will automatically change according to the current time or date input value. Anyone can help me to do this?

View

  <div class="row">
                            <div class="customer_records">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <label>Employee</label>
                                        <select name="employee" class="form-control">
                                            @foreach($employees as $employee)
                                                <option value="{{$employee->id}}" {{old('employee') == $employee->id ? 'selected' : ''}}>{{$employee->name}}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->has('employee'))
                                            <em class="invalid-feedback">
                                                {{ $errors->first('employee') }}
                                            </em>
                                        @endif
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <!-- Date -->
                                        <div class="form-group">
                                            <label>Date:</label>
                                            <div class="input-group date" id="reservationdate1" data-target-input="nearest">
                                                <input type="text" name="date" class="form-control datetimepicker-input" data-target="#reservationdate"/>
                                                <div class="input-group-append" data-target="#reservationdate1" data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>
                                            @if($errors->has('date'))
                                                <em class="invalid-feedback">
                                                    {{ $errors->first('date') }}
                                                </em>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bootstrap-timepicker">
                                            <div class="form-group">
                                                <label>Start time</label>
                                                <div class="input-group date" id="timepicker1" data-target-input="nearest">
                                                    <input type="text" name="start_time" class="form-control datetimepicker-input" data-target="#timepicker1"/>
                                                    <div class="input-group-append" data-target="#timepicker1" data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                    </div>
                                                </div>
                                                <!-- /.input group -->
                                                @if($errors->has('start_time'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('start_time') }}
                                                    </em>
                                                @endif
                                            </div>
                                            <!-- /.form group -->
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bootstrap-timepicker">
                                            <div class="form-group">
                                                <label>End time</label>
                                                <div class="input-group date" id="timepicker2" data-target-input="nearest">
                                                    <input type="text" name="end_time" class="form-control datetimepicker-input" data-target="#timepicker2"/>
                                                    <div class="input-group-append" data-target="#timepicker2" data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                    </div>
                                                </div>
                                                <!-- /.input group -->
                                                @if($errors->has('end_time'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('end_time') }}
                                                    </em>
                                                @endif
                                            </div>
                                            <!-- /.form group -->
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>Service Area</label>
                                        <select name="service_area" class="form-control">
                                            <option value="GRILL" {{old('service_area') == 'GRILL' ? 'selected' : ''}}>GRILL</option>
                                            <option value="PANS" {{old('service_area') == 'PANS' ? 'selected' : ''}}>PANS</option>
                                            <option value="PASS" {{old('service_area') == 'PASS' ? 'selected' : ''}}>PASS</option>
                                            <option value="FRYER" {{old('service_area') == 'FRYER' ? 'selected' : ''}}>FRYER</option>
                                            <option value="KICHAND" {{old('service_area') == 'KICHAND' ? 'selected' : ''}}>KICHAND</option>
                                            <option value="PRP-OVEN" {{old('service_area') == 'PRP-OVEN' ? 'selected' : ''}}>PRP-OVEN</option>
                                            <option value="OVEN" {{old('service_area') == 'OVEN' ? 'selected' : ''}}>OVEN</option>
                                            <option value="DRIVER" {{old('service_area') == 'DRIVER' ? 'selected' : ''}}>DRIVER</option>
                                        </select>
                                        @if($errors->has('service_area'))
                                            <em class="invalid-feedback">
                                                {{ $errors->first('service_area') }}
                                            </em>
                                        @endif
                                    </div>
                                    <div class="col-md-10"></div>
                                </div>
                                <a class="extra-fields-customer" href="#">Add More Customer</a>
                            </div>

                            <div class="customer_records_dynamic"></div>

                        </div>

 //Timepicker
        $('#timepicker1').datetimepicker({
            use24hours: true,
            format: 'HH:mm'
        });
        $('#timepicker2').datetimepicker({
            use24hours: true,
            format: 'HH:mm'
        })


        $('#reservationdate1').datetimepicker({
            // format: 'd-M-yyyy'
            format: 'YYYY-MM-DD',

        });
        $('.extra-fields-customer').click(function() {
            $('.customer_records').clone().appendTo('.customer_records_dynamic');
            $('.customer_records_dynamic .customer_records').addClass('single remove');
            $('.single .extra-fields-customer').remove();
            $('.single').append('<a href="#" class="remove-field btn-remove-customer">Remove Fields</a>');
            $('.customer_records_dynamic > .single').attr("class", "remove");

            $('.customer_records_dynamic .date').each(function() {
                var count = 1;
                // var fieldname = $(this).attr("name");
                var fieldname = $(this).attr('id');
                $(this).attr('id', fieldname + count);
                $(this).attr('data-target', '#'+fieldname + count);
               // console.log($(this).attr('data-target', '#'+fieldname + count));
                $(this).append(" <script>$('#timepicker1'+count).datetimepicker({use24hours: true, format: 'HH:mm'});<\/script>");
                count++;

            });

        });
        $(document).on('click', '.remove-field', function(e) {
            $(this).parent('.remove').remove();
            e.preventDefault();
        });

``

Library : I am trying to make multiple date & time picker input using Bootstrap datetimepicker. But when I click one time input other time inputs will automatically change according to the current time or date input value. Anyone can help me to do this?

View

    <div class="row">
                            <div class="customer_records">
                                <div class="row">
                                    <div class="col-md-6 form-group">
                                        <label>Employee</label>
                                        <select name="employee" class="form-control">
                                            @foreach($employees as $employee)
                                                <option value="{{$employee->id}}" {{old('employee') == $employee->id ? 'selected' : ''}}>{{$employee->name}}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->has('employee'))
                                            <em class="invalid-feedback">
                                                {{ $errors->first('employee') }}
                                            </em>
                                        @endif
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <!-- Date -->
                                        <div class="form-group">
                                            <label>Date:</label>
                                            <div class="input-group date" id="reservationdate1" data-target-input="nearest">
                                                <input type="text" name="date" class="form-control datetimepicker-input" data-target="#reservationdate"/>
                                                <div class="input-group-append" data-target="#reservationdate1" data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>
                                            @if($errors->has('date'))
                                                <em class="invalid-feedback">
                                                    {{ $errors->first('date') }}
                                                </em>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bootstrap-timepicker">
                                            <div class="form-group">
                                                <label>Start time</label>
                                                <div class="input-group date" id="timepicker1" data-target-input="nearest">
                                                    <input type="text" name="start_time" class="form-control datetimepicker-input" data-target="#timepicker1"/>
                                                    <div class="input-group-append" data-target="#timepicker1" data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                    </div>
                                                </div>
                                                <!-- /.input group -->
                                                @if($errors->has('start_time'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('start_time') }}
                                                    </em>
                                                @endif
                                            </div>
                                            <!-- /.form group -->
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="bootstrap-timepicker">
                                            <div class="form-group">
                                                <label>End time</label>
                                                <div class="input-group date" id="timepicker2" data-target-input="nearest">
                                                    <input type="text" name="end_time" class="form-control datetimepicker-input" data-target="#timepicker2"/>
                                                    <div class="input-group-append" data-target="#timepicker2" data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                    </div>
                                                </div>
                                                <!-- /.input group -->
                                                @if($errors->has('end_time'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('end_time') }}
                                                    </em>
                                                @endif
                                            </div>
                                            <!-- /.form group -->
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>Service Area</label>
                                        <select name="service_area" class="form-control">
                                            <option value="GRILL" {{old('service_area') == 'GRILL' ? 'selected' : ''}}>GRILL</option>
                                            <option value="PANS" {{old('service_area') == 'PANS' ? 'selected' : ''}}>PANS</option>
                                            <option value="PASS" {{old('service_area') == 'PASS' ? 'selected' : ''}}>PASS</option>
                                            <option value="FRYER" {{old('service_area') == 'FRYER' ? 'selected' : ''}}>FRYER</option>
                                            <option value="KICHAND" {{old('service_area') == 'KICHAND' ? 'selected' : ''}}>KICHAND</option>
                                            <option value="PRP-OVEN" {{old('service_area') == 'PRP-OVEN' ? 'selected' : ''}}>PRP-OVEN</option>
                                            <option value="OVEN" {{old('service_area') == 'OVEN' ? 'selected' : ''}}>OVEN</option>
                                            <option value="DRIVER" {{old('service_area') == 'DRIVER' ? 'selected' : ''}}>DRIVER</option>
                                        </select>
                                        @if($errors->has('service_area'))
                                            <em class="invalid-feedback">
                                                {{ $errors->first('service_area') }}
                                            </em>
                                        @endif
                                    </div>
                                    <div class="col-md-10"></div>
                                </div>
                                <a class="extra-fields-customer" href="#">Add More Customer</a>
                            </div>

                            <div class="customer_records_dynamic"></div>

                        </div>

JS

 //Timepicker
        $('#timepicker1').datetimepicker({
            use24hours: true,
            format: 'HH:mm'
        });
        $('#timepicker2').datetimepicker({
            use24hours: true,
            format: 'HH:mm'
        })


        $('#reservationdate1').datetimepicker({
            // format: 'd-M-yyyy'
            format: 'YYYY-MM-DD',

        });
        $('.extra-fields-customer').click(function() {
            $('.customer_records').clone().appendTo('.customer_records_dynamic');
            $('.customer_records_dynamic .customer_records').addClass('single remove');
            $('.single .extra-fields-customer').remove();
            $('.single').append('<a href="#" class="remove-field btn-remove-customer">Remove Fields</a>');
            $('.customer_records_dynamic > .single').attr("class", "remove");

            $('.customer_records_dynamic .date').each(function() {
                var count = 1;
                // var fieldname = $(this).attr("name");
                var fieldname = $(this).attr('id');
                $(this).attr('id', fieldname + count);
                $(this).attr('data-target', '#'+fieldname + count);
               // console.log($(this).attr('data-target', '#'+fieldname + count));
                $(this).append(" <script>$('#timepicker1'+count).datetimepicker({use24hours: true, format: 'HH:mm'});<\/script>");
                count++;

            });

        });
        $(document).on('click', '.remove-field', function(e) {
            $(this).parent('.remove').remove();
            e.preventDefault();
        });

I am using "https://tempusdominus.github.io/bootstrap-4/" library.

MarianoMoreyra

5 years ago

Level 25

Hi @sanjayacloud

So this reply from your other post didn't help you to have multiple date time pickers? https://laracasts.com/discuss/channels/javascript/how-to-use-multiple-date-and-time-picker-inputs-in-same-form-bootstrap-datetimepicker?page=1#reply=666184

I even provided you a working codepen. I've just read that you wanted only time picker and not date time...the same idea from my reply applies to just time pickers...

Did you try my suggestion at least?

Let me know if you need more details to make it work.

MarianoMoreyra

5 years ago

Level 25

@sanjayacloud

I've updated the codepen so you can see it working with time only pickers... https://codepen.io/mmoreyra/pen/vYKwjWV

sanjayacloud

5 years ago

Level 3

@marianomoreyra This is ok if I use it as it is. But when I dynamically generate as my below code. It's not work

Here is my new blade with dynamic row generate.


@extends('layouts.admin')
@section('styles')
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="{{url('admin/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">
@endsection

@section('content')
<!-- Main content -->
<div class="content">
    <div class="container">
        <div class="row mt-3 mb-3">
            <div class="col-md-9"></div>
            <div class="col-md-3 text-right">

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Make new Roster</h3>
                    </div>
                    <div class="card-body">
                    <form method="POST" action="{{url('roster/store')}}">
                        @csrf
                        <div class="row">
                            <form action="" method="post">
                                <div id="dynamic-field-1" class="form-group dynamic-field">
                                    <div class="form-group col-md-6">
                                        <label>Start</label>
                                        <div class="input-group date timepicker1" id="start_dt_1" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input datetimepicker" data-target="#start_dt_1" name="start_time[]"/>
                                            <span class="input-group-addon" data-target="#start_dt_1" data-toggle="datetimepicker">
              <span class="fa fa-calendar"></span>
            </span>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>End</label>
                                        <div class="input-group date timepicker1" id="end_dt_1" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input datetimepicker" data-target="#end_dt_1" name="end_time[]"/>
                                            <span class="input-group-addon" data-target="#end_dt_1" data-toggle="datetimepicker">
              <span class="fa fa-calendar"></span>
            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix mt-4">
                                    <button type="button" id="add-button" class="btn btn-secondary float-left text-uppercase shadow-sm"><i class="fas fa-plus fa-fw"></i> Add</button>
                                    <button type="button" id="remove-button" class="btn btn-secondary float-left text-uppercase ml-1" disabled="disabled"><i class="fas fa-minus fa-fw"></i> Remove</button>
                                    <button type="submit" class="btn btn-primary float-right text-uppercase shadow-sm">Submit</button>
                                </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-4 offset-4">
                                <button class="btn btn-block bg-gradient-cyan">Submit</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- /.content -->
@endsection
@section('scripts')
    <script src="{{url('admin/plugins/moment/moment.min.js')}}"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{url('admin/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
    @if(session('success'))
        <script>
            var msg = "{{session('success')}}"
            $( document ).ready(function() {
                $.notify(msg, "success");
                // console.log( "ready!" );
            });
        </script>
    @endif
@parent
    <script>
        $(function () {
            $('.timepicker1').datetimepicker({
                format: 'LT'
            });
        });

        $(document).ready(function() {
            var buttonAdd = $("#add-button");
            var buttonRemove = $("#remove-button");
            var className = ".dynamic-field";
            var count = 0;
            var field = "";
            var maxFields = 5;

            function totalFields() {
                return $(className).length;
            }

            function addNewField() {
                count = totalFields() + 1;
                field = $("#dynamic-field-1").clone();
                field.attr("id", "dynamic-field-" + count);
                field.children("label").text("Field " + count);
                field.find("input").val("");
                $(className + ":last").after($(field));
            }

            function removeLastField() {
                if (totalFields() > 1) {
                    $(className + ":last").remove();
                }
            }

            function enableButtonRemove() {
                if (totalFields() === 2) {
                    buttonRemove.removeAttr("disabled");
                    buttonRemove.addClass("shadow-sm");
                }
            }

            function disableButtonRemove() {
                if (totalFields() === 1) {
                    buttonRemove.attr("disabled", "disabled");
                    buttonRemove.removeClass("shadow-sm");
                }
            }

            function disableButtonAdd() {
                if (totalFields() === maxFields) {
                    buttonAdd.attr("disabled", "disabled");
                    buttonAdd.removeClass("shadow-sm");
                }
            }

            function enableButtonAdd() {
                if (totalFields() === (maxFields - 1)) {
                    buttonAdd.removeAttr("disabled");
                    buttonAdd.addClass("shadow-sm");
                }
            }

            buttonAdd.click(function() {
                addNewField();
                enableButtonRemove();
                disableButtonAdd();
            });

            buttonRemove.click(function() {
                removeLastField();
                disableButtonRemove();
                enableButtonAdd();
            });
        });


    </script>
@endsection

MarianoMoreyra

5 years ago

Best Answer

Level 25

Ok @sanjayacloud

There are several corrections / modifications to be explained here, so I took your code to a codepen and made it work there: https://codepen.io/mmoreyra/pen/VwjJyRG

Hopefully that's what you were looking for!!

If this works for you, please remember marking the question as answered.

sanjayacloud

5 years ago

Level 3

Thanks. Its work

Please or to participate in this conversation.