Datetimepicker框不断改变大小

Posted 2023-05-08

【中文标题】Datetimepicker框不断改变大小

【英文标题】：Datetimepicker box keeps changing the size

【发布时间】：2021-12-04 12:51:42

【问题描述】：

我的表单中有一个引导日期时间选择器。但是当我选择日期时间时，输入框大小不断变化。输入后，我无法使用 datetimepicker 更改日期时间。我认为，这是因为 datatble.min.js 与 datetimepicker.js 冲突。但是，但我仍然没有解决它。任何帮助将不胜感激。

之前 Before add datetimepicker

添加 Add Date Add Time

之后 Input box size changed

模态

   <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>

【参考方案1】：

我建议您使用一些为此而设计的特殊库。 https://www.daterangepicker.com/ https://flatlogic.com/blog/best-javascript-datepicker-libraries/