Latest

random

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,bootstrap datepicker demo,twitter bootstrap datepicker example,bootstrap datepicker format
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:-

bootstrap datepicker format doesn't work,bootstrap datepicker not working,bootstrap datepicker format yyyy-mm-dd, bootstrap datepicker not working in modal

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;
Download

Also you can get bootstrap theme, bootstrap web design and bootstrap free templates from Bootstrap Repository

1 comment:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.