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: 2376
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
});