Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sanjayacloud's avatar

How to use multiple date and time picker inputs in same form (Bootstrap datetimepicker)

Hi Guys,

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

<form method="POST" action="{{url('admin/expense/store')}}">
                        @csrf
                            <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 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 timepicker1" id="timepicker2" data-target-input="nearest">
                                                <input type="text" name="end_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('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>
                    </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>

JS


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

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

I am using this plugin.

<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>
0 likes
9 replies
MarianoMoreyra's avatar

Hi @sanjayacloud

The thing is that you are using css classes for targeting your datetime pickers, and you are giving both the start and end dates the same class name: timepicker1.

Try changing the references to the ID instead of the class data-target="#timepicker1", for which you'll have to add the id="timepicker1" to the start_time div:

                                             <div class="input-group date timepicker1"  data-target-input="nearest" id="timepicker1">
                                                <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>

then change the references at the end_time to use ID too data-target="#timepicker2":

                                           <div class="input-group date timepicker1" 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>

I guess you won't need to change the JS code, but if it still doesn't work, you could try initializing both pickers by their id too:

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

Hope this works!

sanjayacloud's avatar

No. This row will create dynamiclly. I cannot hard code like this.

MarianoMoreyra's avatar

Well @sanjayacloud you'll actually have to go with the IDs if you want to make it work...

So, whay you can do is to create the IDs dynamically appending an incrementing index at the end and giving all the inputs the same name with array notation so you can easily get all the values at your Controller.

For example, for the first row can have:

<div class="input-group date timepicker1"  data-target-input="nearest" id="start_dt_1">
    <input type="text" name="start_time[]" class="form-control datetimepicker-input" data-target="#timepicker1"/>
. . .
<div class="input-group date timepicker1"  data-target-input="nearest" id="end_dt_1">
    <input type="text" name="end_time[]" class="form-control datetimepicker-input" data-target="#timepicker2"/>

next row:

<div class="input-group date timepicker1"  data-target-input="nearest" id="start_dt_2">
    <input type="text" name="start_time[]" class="form-control datetimepicker-input" data-target="#timepicker1"/>
. . .
<div class="input-group date timepicker1"  data-target-input="nearest" id="end_dt_2">
    <input type="text" name="end_time[]" class="form-control datetimepicker-input" data-target="#timepicker2"/>

and so on...

Here you have a codepen working with multiple datetime pickers configured this way so you can verify it works: https://codepen.io/mmoreyra/pen/vYKwjWV

Finally, you can leave your JS as it is, so it will initialize any datetime picker created this way.

vishalpambhar1000's avatar

just simply assign a class name for each form must be same like and paste the below scripts in your blad file after date picker jquery plugins.inside the form, the textbox name is date picker or whatever you want

$(function(){ $('form.dtpicker').each(function(k,form){ $(form).find('input[name="datepicker"]').datetimepicker(); }); });
vikramjkn's avatar

Can you simply create date-time picker using class "dtPicker". Means assign class to any new date-time picker element.

$(".dtPicker").).datetimepicker({
            multitime: true,
            use24hours: true,
            format: 'HH:mm'
        });

if you want to add date time picker input dynamically you would have to initialize date-time picker in that input.

sanjayacloud's avatar

Can I know how to initialize date-time picker in that input?

vishalpambhar1000's avatar

just simply assign a class name for each form must be same like and paste the below scripts in your blad file after date picker jquery plugins.inside the form, the textbox name is date picker or whatever you want

$(function(){ $('form.dtpicker').each(function(k,form){ $(form).find('input[name="datepicker"]').datetimepicker(); }); });

Please or to participate in this conversation.