Datetimepicker box keeps changing the size

Question

I have a bootstrap datetimepicker in my form. But when i select datetime, input box size keeps changing. After input it, i can't change the datetime with datetimepicker. I think, it's because datatble.min.js conflict with datetimepicker.js. But, but i still haven't solved it. Any help would be appreciated.

Before Before add datetimepicker

Add Add Date Add Time

After Input box size changed

Modal

   <div id="modal_form" class="modal fade" role="dialog" aria-hidden="true" aria labelledby="formModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="formModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form" role="form" action="<?= base_url("catalog/insert") ?>" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-md-3 control-label">Start Date</label>
                            <div class="col-md-9">
                                <div class="input-group date form_datetime form_datetime bs-datetime">
                                    <input type="text" size="16" class="form-control" name="start">
                                    <span class=" input-group-addon">
                                        <button class="btn default date-set" type="button">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">End Date</label>
                            <div class="col-md-9">
                                <div class="input-group date form_datetime form_datetime bs-datetime">
                                    <input type="text" size="16" class="form-control" name="end">
                                    <span class="input-group-addon">
                                        <button class="btn default date-set" type="button">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">Descirption</label>
                            <div class="col-md-9">
                                <textarea class="form-control" rows="3" name="desc" id="desc" val=""></textarea>
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn grey-salsa btn-outline" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <button class="btn green btn-primary" data-dismiss="modal" type="submit" id="btnsave">Save</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

I suggest you use some special libraries which are made for this. https://www.daterangepicker.com/ https://flatlogic.com/blog/best-javascript-datepicker-libraries/