Bootstrap Datepicker Example Demo
What is Bootstrap Framework?
Now a days Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive web design and mobile first projects on the web. Bootstrap makes front-end web development faster and easier. It works on all devices of all shapes and web projects of different sizes. Bootstrap is free, open source and you can easily download Bootstrap examples. This blog post demonstrates cross browser bootstrap datepicker example in asp.net web applications.
Bootstrap Datepicker Example MVC
Find the code snippet for twitter bootstrap datepicker example below :-
 |
| bootstrap datepicker tutorial |
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap calendar template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
<link rel="stylesheet" href="datepicker.css">
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap-datepicker.js"></script>
<!--add this css style where you are using bootstrap datepicker within the model window-->
<style type="text/css">
.datepicker {
z-index: 1151 !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true
});
});
</script>
</head>
<body>
<div class="container">
<p>Select Start Date:</p>
<input type="text" readonly id="datepicker">
</div>
</body>
</html>
Undefined NaN meets NaN/NaN/NaN in IE
Once selecting a Date with Bootstrap Datepicker control in IE and Firefox browser you may face a known issue in bootstrap-datepicker.js while typing date manually. See the screenshot below:-
Download
Fixing the ui displaying 'undefined nan' when typing dates in IE & Firefox
You can resolved 'undefined nan' datepicker issue by adding a single line in bootstrap-datepicker.js file shown below :-
var d = new Date(this.viewDate),
year = d.getUTCFullYear(),
month = d.getUTCMonth(),
startYear = this.o.startDate !== -Infinity ? this.o.startDate.getUTCFullYear() : -Infinity,
startMonth = this.o.startDate !== -Infinity ? this.o.startDate.getUTCMonth() : -Infinity,
endYear = this.o.endDate !== Infinity ? this.o.endDate.getUTCFullYear() : Infinity,
endMonth = this.o.endDate !== Infinity ? this.o.endDate.getUTCMonth() : Infinity,
currentDate = this.date && this.date.valueOf(),
tooltip;
if (isNaN(year) || isNaN(month)) return;
Also you can get bootstrap theme, bootstrap web design and bootstrap free templates from Bootstrap Repository
Bootstrap Datepicker Example Demo
Reviewed by Ravi Kumar
on
12:56 AM
Rating:
Reviewed by Ravi Kumar
on
12:56 AM
Rating:
Thanks for this good code.
ReplyDelete