Please enable Javascript for better experience...
BootStrap Datetime Picker Example
By Rahul Kumar Jha | Jun 8, 2015 | In Articles | Total Views [ 30245 ]
Taged In
(4 Like)

In this article I will show how to use bootstrap datetime picker control with a simple example.


Bootstrap provides so many UI related things like css, styling, animation, useful tools like datetime picker, tables etc. which can be directly used to create interactive UI. In this article I will try to show how can you add bootstrap datetime picker control to your page in simple steps. Let's start step by step.

bootstrap datetime picker


create a html file and name it index.html and add a textbox in your page. Copy below code.

    <h3>BootStrap Datetime Picker Example</h3>
    <hr />
    <div>Click textbox to open datetime picker: <input type="text" id="fromDate" class="datepicker" /></div>

Add reference

Add bootstrap css and script reference to your page. This sample requires bootstrap-datepicker.css and bootstrap-datepicker.js files to work. You can download these files from bootstrap site or you can also download sample code from DownLoad Code link above.

    <script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
    <link href="DatePicker/bootstrap-datepicker.css" rel="stylesheet" />
    <script src="DatePicker/bootstrap-datepicker.js"></script>


Add these lines of code in script block.

    $(document).ready(function () {
        $(".datepicker").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayBtn: 'linked' })

Run the index.html and you will find your datetime picker ready. It was very simple to implement. Hope this can help you.

Share this

About the Author

Rahul Kumar Jha
Rahul Kumar Jha
Founder, Developer

Public profile: user/profile/99900001

Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, ANGULAR, ANGULAR JS, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments

Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID