UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Asp.Net - Datepicker

Demo and Code for how to implement jQuery UI Date picker in Asp.net

by Athil


Posted on 27 Jul 2018 Category: Asp.net Views: 63

Edited on 10 Jul 2019


Here I am going to show how to implement jQuery UI Date picker in Asp.net web sites.

DEMO

1 Need to Link the following CSS and javascript to the Header section of web page


<link type="text/css" rel ="stylesheet" href= "/css/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/css/DatePicker.css" />
<script type="text/javascript" src="/js/jquery.min.js" >
</script>
<script type="text/javascript" src="/js/jquery-ui.js">

Download the CSS and Javascript Files.

2. Add one textbox

<asp:TextBox ID="TxtStartDate" runat="server"></asp:TextBox>

3. Add the script to make Text box to datepicker

 
      $(document).ready(function () {
          $("#<%= TxtStartDate.ClientID %>").datepicker();//Id of the control which you wish to use as for date picker
});

FULL Demo Code 



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo for jQuery ui datepicker in asp.net</title>
    <link type="text/css" rel ="stylesheet" href= "/css/jquery-ui.css" />
    <link type="text/css" rel="stylesheet" href="/css/DatePicker.css" />
     <script type="text/javascript" src="/js/jquery.min.js" >
 </script>
 <script type="text/javascript" src="/js/jquery-ui.js">
 </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
 <h1>   Demo for jQuery ui datepicker in asp.net </h1>
        <asp:TextBox ID="TxtStartDate" runat="server"></asp:TextBox>
    
    </div>
    </form>
</body>
 
</html>

Javascript


      $(document).ready(function () {
          $("#<%= TxtStartDate.ClientID %>").datepicker();//Id of the control which you wish to use as for date picker
});

 



Leave a Comment: