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

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

Introduction

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

HTML

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>

Script

Add these lines of code in script block.

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

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

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
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, 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.

 
Please SignUp/Login to comment...

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