Thursday, June 16, 2016

Bootstrap DatePicker Control in ASP.NET Webforms

Here's how to integrate Bootstrap DatePicker widget in you ASP.NET Webforms Project. First, you need to add reference to the following JS and CSS files: bootstrap.min.css, bootstrap-datepicker3.standalone.css, jquery-1.11.1.min.js, bootstrap.min.js, bootstrap-datepicker.min.js.
1
2
3
4
5
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.css" />
<script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
Create a simple registration form with Bootstrap classes.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <div class="container">
    <div class="row">               
        <div class="col-sm-6">
            <fieldset>
                <legend>Registration Form</legend>
                <div class="form-group">                        
                        <label for="usr">Name:</label>
                        <input type="text" class="form-control" id="name" />
                 </div>
                <div class="form-group">                        
                        <label for="usr">Age:</label>
                        <input type="text" class="form-control" id="age" />
                 </div>
                <div class="form-group">                        
                        <label for="usr">Address:</label>
                        <input type="text" class="form-control" id="address" />
                 </div>
                <div class="form-group">  
                        <label for="usr">Birthdate:</label>                      
                        <div class='input-group date' id='birthdate'>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
            </fieldset>                    
        </div>
    </div>
</div>

Your JavaScript code will initialize the datepicker control with common properties such as autoclose, format, todayHighlight, clearBtn and orientation. However, you might add several properties as per your needs which is stated in the documentation of the control.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script type="text/javascript">
    $(document).ready(function () {            
        $("#birthdate").datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            clearBtn: true,
            orientation: 'bottom'
        });
    });
</script>

Screenshot
That's it.. :-)

0 comments:

Post a Comment