How resize filed input datetime in bootstrap-datetimepicker?

Question

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? For example how reduce field input datetime?

How to eliminate the resulting difference?

p.s. I found some question

BUT proposed solution not work for my case.

please fix errors in your snippet...

kukkuz
– kukkuz

2016-09-12 12:45:50 +00:00
Commented Sep 12, 2016 at 12:45 — kukkuz
– kukkuz, Commented Sep 12, 2016 at 12:45
fixed, absent </div>

Nikolay Baranenko
– Nikolay Baranenko

2016-09-12 12:49:31 +00:00
Commented Sep 12, 2016 at 12:49 — Nikolay Baranenko
– Nikolay Baranenko, Commented Sep 12, 2016 at 12:49

Vishal Panchal · Accepted Answer · 2016-09-12 13:50:35Z

0

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

edited Sep 12, 2016 at 13:50

answered Sep 12, 2016 at 12:52

Vishal Panchal

905 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Nikolay Baranenko Over a year ago

For example how reduce field input datetime?

Vishal Panchal Over a year ago

reduce means in which context?

Nikolay Baranenko Over a year ago

I add jpg: the distance from the last digit to the icons I want to reduce.

Vishal Panchal Over a year ago

Ok, so if your design is not responsive then give fix width to input datetime element and span that is used to pick date give it to float : left

Nikolay Baranenko Over a year ago

Please specify your answer

|

Collectives™ on Stack Overflow

How resize filed input datetime in bootstrap-datetimepicker?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related