Search code examples
htmlcssbootstrap-modaldatetimepickerbootstrap-datetimepicker

How resize filed input datetime in bootstrap-datetimepicker?

I decided to change dashboard selected period rage datetime. I chose 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>

How resize field input datetime in bootstrap-datetimepicker? enter image description here For example how reduce field input datetime?

enter image description here

How to eliminate the resulting difference?

p.s. I found some question

BUT proposed solution not work for my case.

Solution

  • Your question is not clear. May be you want to implement date range picker in your dashboard with bootstrap datetime picker.So, if it is like that then the below link is useful to you.

    Link : http://www.daterangepicker.com/

    Use the below code : 

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

    Add CSS code : 

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