如何在bootstrap-datetimepicker中调整归档输入日期时间?

时间:2016-09-12 12:44:42

标签: html css bootstrap-modal datetimepicker bootstrap-datetimepicker

我决定更改仪表板选定的期限愤怒日期时间。 我选择了bootstrap-datetimepicker。



$(function () {              
                $("#datetime_input").datetimepicker({
                    locale: 'ru'
                });
                $("#datetime_output").datetimepicker({
                    locale: 'ru'
                });
   });

<div class="row">
        <span>C</span>
        <div class='col-xs-3'>
            <div class="form-group">
                <div class='input-group date' id='datetime_input'>
                    <input id="INPUT_DATETIME" type='text' class="form-control" value="${INPUT_DATETIME}"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>

        <span>По</span>
        <div class='col-sm-3'>
            <div class="form-group">
                <div class='input-group date' id='datetime_output'>
                    <input id="OUTPUT_DATETIME" type='text' class="form-control" value="${OUTPUT_DATETIME}"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
</div>
&#13;
&#13;
&#13;

如何在bootstrap-datetimepicker中调整字段输入日期时间? enter image description here 例如,如何减少字段输入日期时间?

enter image description here

如何消除由此产生的差异?

P.S。 我发现了一些问题

但建议的解决方案对我的案例不起作用。

1 个答案:

答案 0 :(得分:0)

你的问题不明确。您可能希望在仪表板中使用引导日期时间选择器实现日期范围选择器。所以,如果是这样,那么下面的链接对您有用。

链接:http://www.daterangepicker.com/

使用以下代码:

 <div class="row">
    <span>C</span>
    <div class='col-xs-3'>
        <div class="form-group">
            <div class='input-group date' id='datetime_input'>
                <input id="INPUT_DATETIME" type='text' class="form-control"  value="${INPUT_DATETIME}"/>
                <span id="input_pick" class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <span>По</span>
    <div class='col-sm-3'>
        <div class="form-group">
            <div class='input-group date' id='datetime_output'>
                <input id="OUTPUT_DATETIME" type='text' class="form-control" value="${OUTPUT_DATETIME}"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
     </div>
  </div>

添加CSS代码:

 #INPUT_DATETIME{
   width : 177px;
 }
 #input_pick{
  width: 37px; 
  height: 34px;
  float: left;
 }