JQuery UI Datepicker (Calendar) with asp.net textbox

-

jQuery UI DatePicker (Calendar) Example in ASP.Net:



In this post we want to fill the date in textbox by user using jquery. For creating this type of example we want to use two jquery and one asp.net server control textbox. Here we use Jquery function with textbox control.

Using jQuery DatePicker in ASP.NET:

js/jquery-1.7.2.min.js
js/jquery-ui-1.8.19.custom.min.js

JQuery Related other Post:


How to use jQuery UI Datepicker popup Calender with asp.net:

Write these scripts on asp.net web page head section
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script> 

JQuery function  for using date picker:

$(function() {
    $("#txtDatepicker").datepicker();
});

 JQuery  Datepicker popup Calender with asp.net text box:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Datepicker in asp.net application </title>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#txtDatepicker").datepicker();
});
</script>

    <style type="text/css">
        .style1
        {
            color: #800000;
        }
        .style2
        {
            font-size: x-large;
        }
        .style3
        {
            font-size: x-large;
            color: #990000;
        }
    </style>

</head>

<body>
<form id="form1" runat="server">
<div align="center">
<b>
    <span class="style1"><span class="style2">jQuery date picker Example</span>
    </span>
    <br />
    <br />
    <span class="style3">click on text box and select Date</span>:</b>
    <br />
 <br />
 <asp:TextBox ID="txtDatepicker" runat="server" Width="220px"/>
</div>
</form>
</body>
</html>


Integrating JQuery UI Datepicker with asp.net textbox 


JQuery UI Datepicker (Calendar) with asp.net textbox
JQuery UI Datepicker


Related post on asp.net tutorial.








Comments

Post a Comment