Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Monday, September 8, 2014

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.








No comments:

Post a Comment