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

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).ready(function () {} 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 and add the above three files into your projects because it’s

mandatory for using the bootstrap libraries and methods.

 Use datepicker Method :-

 

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

Output

 

 in my next post i'll explain about Dialog using BootStrap in ASP.Net

  Modified On Sep-18-2014 01:24:20 PM

Leave Comment