asp.net 添加datetimepicker 出现问题与处理

开发环境：VS2019   

webform  bootstrap3

按习惯，小子从nuget获取了一个datetimepicker的包，并安装准备使用。然由于从github上获取的源码中示例没看明白，不得不作罢（哎，理解能力看来还是低了点儿）。

 

后从下述链接获取到一个比较好的包

源码：https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip

git地址：https://github.com/smalot/bootstrap-datetimepicker

 

在这个源码中的sample一看就明白是怎么回事了……

 

可在实际模仿(将相关代码抄袭到aspx网页中)的过程中又出现了问题，如下：日期清空与选择按钮与文本框间距太远，正常情况下应该是紧挨。

 

正常情况（测试中示例）

 

也就是说现在input与两个图标之间出现了间隔，其后采取如下进行了间隔消除，span设置其display float  width height属性，input同时设置其float（测试中发现，不设置其width height会导致其图标显示有问题）后恢复了正常，分析了下datetimepicker的css后得知：可以不用设置其display，在css中有对应设置。（小子为了不使input太长，设置了其长度）

                    <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy MM dd " data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly style="float:left;width:150px;">
                        <span class="input-group-addon" style="display:block;float:left;width:40px;height:34px;" ><span class="glyphicon glyphicon-remove" style="display:inline"></span></span>
                        <span class="input-group-addon" style="display:block;float:left;width:40px;height:34px;"><span class="glyphicon glyphicon-calendar" ></span></span>
                    </div>

恢复后如下：

代码如下：下述代码中对其中的很多长度都作了限制，主要是为了避免在缩小补窗口的过程中，布局出现变动。

  <div class="form-group" style="margin-top:100px; width:400px;">
                    <label for="dtp_input2" class="col-md-2 control-label" style="display:block;width:95px;float:left; padding:5px;">Date Picking</label>
                    <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy MM dd " data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="float:left;padding:5px;width:240px;">
                        <input class="form-control" size="16" type="text" value="" readonly style="float:left;width:150px;">
                        <span class="input-group-addon" style="float:left;width:40px;height:34px;" ><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon" style="display:block;float:left;width:40px;height:34px;"><span class="glyphicon glyphicon-calendar" ></span></span>
                    </div>
                    <input type="hidden" id="dtp_input2" value="" /><br />
                </div>

 

以下实测同样可行，并且在小屏上不会出现由于设置了长度导致的布局混乱。

               <div class="col-sm-3">

                    <div class="form-group">
                        <label for="dtp_input2 " class="control-label" >Date</label>
                        <div class="input-group date form_date " data-date="" data-date-format="yyyy MM dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:auto;">
                            <input class="form-control"  type="text" value="" id="inputDate"  runat="server" readonly="readonly"  />
                            <span class="input-group-addon "  ><span class="glyphicon glyphicon-remove" ></span></span>
                            <span class="input-group-addon " ><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <input type="hidden" id="dtp_input2" value="" /><br />
                    </div>
                </div>