---
title: "Date Picker using BootStrap in ASP.Net"  
description: "Bootstrap provides so many UI related things like css, styling, animation, useful tools like datetime picker, tables etc. which can be directly used t"  
author: "Anonymous User"  
published: 2014-01-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/627/date-picker-using-bootstrap-in-asp-dot-net  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 1 minute  

---

# Date Picker using BootStrap in ASP.Net

Bootstrap provides so many UI related things like css, styling, [animation](https://www.mindstick.com/articles/13040/seven-helpful-tips-to-start-and-grow-an-animation-video-company), useful tools like [datetime](https://www.mindstick.com/forum/12949/how-to-validate-if-a-datetime-field-is-not-null-empty) picker, tables etc. which can be directly used to create [interactive](https://www.mindstick.com/forum/161329/how-does-sys-stdin-isatty-help-in-detecting-interactive-mode) UI.\

In this blog , I’m explaining how to make a datepicker using Bootstrap in ASP.Net

##### Example :-

In This Example we Create DatePicker With Help [BootStrap File](https://www.mindstick.com/forum/156874/how-to-create-bootstrap-file-to-design-web-page-in-bootstrap-5)

##### Form Design:-

```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Js/jquery-1.8.3.min.js"></script>    <script src="Js/jquery-ui-1.9.2.custom.min.js"></script>    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />    <link href="Content/LoginStyle.css" rel="stylesheet" /></head><body>    <form id="form1" runat="server">        <div>            <center>         <h1>Date Picker</h1>     </center>            <br /><br />            <center>                <h2>Calender : </h2>                <div id="datepicker"></div>            </center>        </div>    </form></body></html> <script type="text/javascript">    $(document).ready(function () {        $('#datepicker').datepicker({            inline: true        });    });</script>
```

Create one div tag and give id datepicker then call datepicker() inside

$([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {} function.

Use this BootStrap File :-

```
<script src="Js/jquery-1.8.3.min.js"></script><script src="Js/jquery-ui-1.9.2.custom.min.js"></script><link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
```

[Download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) and add the above three files into your [projects](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects) because it’s

mandatory for using the bootstrap [libraries](https://answers.mindstick.com/qa/49244/which-company-is-ahead-in-classification-of-data-for-libraries-innovations) and methods.

##### Use datepicker Method :-

```
<script type="text/javascript">    $(document).ready(function () {        $('#datepicker').datepicker({//datepicker method           inline: true        });    }); </script>
```

##### Output

![Date Picker using BootStrap in ASP.Net](https://www.mindstick.com/blogs/70628ac7-5308-4f3b-a8f8-b5045e46440b/images/e7e8ebd5-b4ef-4302-aaed-58c6dfa89778.png)

in my next post i'll explain about [Dialog using BootStrap in ASP.Net](https://www.mindstick.com/blog/628/Dialog%20using%20BootStrap%20in%20ASP%20Net)

---

Original Source: https://www.mindstick.com/blog/627/date-picker-using-bootstrap-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
