Question

70

Bootstrap 3 daterange select in form

rated 0 times [ 71] [ 1] / answers: 1 / hits: 12160 / 11 Years ago, fri, december 27, 2013, 12:00:00

I'm trying to add daterange (https://github.com/eternicode/bootstrap-datepicker) select to my bootstrap 3 form.
I've added form element to my form:

<div class=form-group>

    <label class=col-sm-3 control-label>Dates range</label>

    <div class=col-sm-9>

        <div class=input-daterange id=datepicker>

            <input type=text class=input-small name=start/>

            <span class=add-on>to</span>

            <input type=text class=input-small name=end/>

        </div>

    </div>

</div>

But I get weird looking inputs:

I would like it to look as here.

How should I build my form to get this daterange to look nice? I would like to have those 2 inputs and to to be same width as other inputs and have same focus color.

Here is my form to play with: http://jsfiddle.net/Misiu/a3NV4/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austonjuancarlosb

Add To Favorites

Follow

Total Points: 238

Total Questions: 89

Total Answers: 99

Location: Chad

Member since Mon, Dec 5, 2022

1 Year ago

austonjuancarlosb questions

1 TypeError: Cannot read properties of undefined (reading 'call') on Next.js

Sat, Dec 17, 22, 00:00, 1 Year ago

1 How to check if Metamask is connected after page refreshing

Sat, Feb 19, 22, 00:00, 2 Years ago

1 Slash Commands - Discord.js

Sun, Mar 14, 21, 00:00, 3 Years ago

1 How to reload Next.js page initial props without reloading the whole page

Mon, May 18, 20, 00:00, 4 Years ago

1 How can I disable keyboard input on an html input of type number? What about in react or material-ui?

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 11 Years ago rocky · Accepted Answer

See here example.

To work on Bootstrap 3
http://jsfiddle.net/a3NV4/4/

<div class=input-daterange id=datepicker>

    <div class=input-group>

        <input type=text class=input-small form-control name=start />

        <span class=input-group-addon>to</span>

        <input type=text class=input-small form-control name=end />

    </div>

</div>

JS

$('.input-daterange').datepicker({});