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>
|
That's it.. :-)
thanks
ReplyDeleteyour welcome! :-)
DeleteNice it works. Thank you
ReplyDeleteYour welcome! :-)
DeleteSaludos hermanos.
ReplyDeleteComo puedo hacer para que cuando seleccione una fecha me ejecute un evento o funcion. He intentado con onSelec y aun asi no me funciona.
In English?
DeleteHi, 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.
ReplyDeleteHi, I have posted the solution in a separate post.
Deletehttp://dotnetgenetics.blogspot.com/2018/03/bootstrap-datepicker-arrow-appears-at.html
Cheers! :-)
very nice ... great help an the developers :)
ReplyDeleteThank you.. :-)
Delete