UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Date picker in asp.net

Demo and Code for how to implement jQuery ui datepicker in asp.net web applicaion

by Athil


Posted on 14 Jul 2017 Category: Asp.net Views: 826

Edited on 01 Aug 2017


DEMO

Hi, Here I am going to show how to implement jQuery UI datepicker in asp.net web application. For that, we need to add scripts and external CSS links of jQuery UI and jQuery in Head section. 

Download the CSS and scripts here

Script for assigning control as date picker

$(document).ready(function () {
$("#<%= TxtStartDate.ClientID %>").datepicker();
});

Change Date format - more

$("#txt1").datepicker({ dateFormat: 'dd-M-yy' });

Add the following CSS 

<link type="text/css" rel ="stylesheet" href= "/css/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/css/DatePicker.css" />

Add the following Scripts

 <script type="text/javascript" src="/js/jquery.min.js" >
 </script>
 <script type="text/javascript" src="/js/jquery-ui.js">
 </script>
  <script>
 

 

Full Demo Code for jQuery Date picker in asp.net

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

</html>

 

Related Post

Date time picker in asp.net c#

jQuery ui Date picker change date format

jquery Date picker in update panel

 



Leave a Comment:


Advertisement