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.. :-)

8 comments:

  1. Nice it works. Thank you

    ReplyDelete
  2. Saludos hermanos.

    Como puedo hacer para que cuando seleccione una fecha me ejecute un evento o funcion. He intentado con onSelec y aun asi no me funciona.

    ReplyDelete
  3. Hi, great code here but I just had one issue after implementing it. The pointer at the bottom of the datepicker popup window is showing on the wrong side (if orientation is bottom the pointer should be on top toward the text box). Is there any way to fix this? Thank you.

    ReplyDelete
    Replies
    1. Hi, I have posted the solution in a separate post.
      http://dotnetgenetics.blogspot.com/2018/03/bootstrap-datepicker-arrow-appears-at.html

      Cheers! :-)

      Delete