How to use JQuery DatePicker on ASP.NET web forms

  • by
JQuery DatePicker on ASP.NET Web Forms Pic

In this post we will see how to use JQuery DatePicker on ASP.NET web forms. JQuery scripts are available freely on its Official Website. JQuery DatePicker on ASP.NET Web Forms.

We need following two script for our ASP.NET page:


JQuery UI

And JQuery Style css: Jquery-ui.css

JQuery Datepicker will be used on ASP.NET Textbox and datepicker will be shown on focusing Textbox. In your ASP.NET form add above scripts and css link in the head section and edit your ASP.NET page as below:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebDatePicker.aspx.cs" Inherits="aspnetjquery.WebDatePicker" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
<title>JQuery Date Picker Demo</title>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="//">
$(function () {
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
<form id="form1" runat="server">
<h3>ASP.NET JQuery Date Picker</h3>
<br />
<asp:TextBox ID="datepicker" runat="server" />
<br />
<br />
<asp:Button runat="server" ID="submit" OnClick="submit_Click" Text="Submit" />
<br /><br />
<b><asp:Label runat="server" ID="txtDate" /></b>
<br />
Blog Post and Source code link in the Description box below.

And its aspx.cs (code) file as below:


using System;
namespace aspnetjquery
public partial class WebDatePicker : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)


protected void submit_Click(object sender, EventArgs e)
txtDate.Text = "You Selected:" + datepicker.Text;

Below is the result:

JQuery DatePicker on ASP.NET Web Forms Pic

Also see:

Custom CSS design for JQuery Datepicker


JQuery Datepicker custom design CSS


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.