blog

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

Date Picker using BootStrap in ASP.Net

Anonymous User35696 15-Jan-2014

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:- 
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="AutoComplete.aspx.cs"Inherits="AutoComplete"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
    <scriptsrc="Js/jquery-1.8.3.min.js"></script>
    <scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
    <linkhref="Content/LoginStyle.css"rel="stylesheet"/>
</head>
<body>
    <formid="form1"runat="server">
        <div>
            <center>
         <h1>Date Picker</h1>
     </center>
            <br/><br/>
            <center>
                <h2>Calender : </h2>
                <divid="datepicker"></div>
            </center>
        </div>
    </form>
</body>
</html>
 
<scripttype="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 :-

 

<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="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

 Date Picker using BootStrap in ASP.Net

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


Updated 18-Sep-2014
I am a content writter !

Leave Comment

Comments

Liked By