BootStrap Datetime Picker Example

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.

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 fromDownLoad 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.