Home > DeveloperSection > Blogs > Date Picker using BootStrap in ASP.Net

Date Picker using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 19952  View(s)
Rate this:

Date Picker using BootStrap in ASP.Net


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


Don't want to miss updates? Please click the below button!

Follow MindStick