Bootstrap Snippet form date input icon using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <div class="containter">
    <div class="row">
        <div class="col-md-12">
            <div class='right-inner-addon date datepicker' data-date-format="yyyy-mm-dd">
                <i class="glyphicon glyphicon-calendar"></i>
                <input name='name' value="" type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd"/>
                
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.right-inner-addon {
    position: relative;
}
.right-inner-addon input{
    padding-right: 30px;
}
.right-inner-addon i{
    
    position:absolute;
    /*text-indent: -15px;
    bottom: -8px;
    font-size: 1.3em;*/
    right: 0px;
    padding: 10px 12px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"form date input icon"
Bootstrap 3.3.0 Snippet by nonconforme

Related: See More

Questions / Comments:

"form date input icon" Bootstrap 3.3.0 Snippet by nonconforme

Related: See More

Questions / Comments:

"form date input icon"
Bootstrap 3.3.0 Snippet by nonconforme