Thursday, 25 October 2012
Monday, 22 October 2012
Jquery validation end date should be greater than start date using datepicker
To implement this one first open Visual Studio and create new website after that write following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Datepicker - Select a Date Range</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css"
rel="stylesheet"
/>
<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()
{
var dates = $("#txtFrom,
#txtTo").datepicker({
minDate: '0',
maxDate: '+7D',
onSelect: function(selectedDate)
{
var option = this.id == "txtFrom" ? "minDate"
: "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div class="demo">
<label for="from">From</label>
<asp:TextBox ID="txtFrom"
runat="server"/>
<label for="to">to</label>
<asp:TextBox ID="txtTo"
runat="server"/>
</div>
</form>
</body>
</html>
|
If
you observe above code in header section I added some of script files and css
classes by using those files we will display calendar control with beautiful
css style. You can get those files by downloading attached sample.
If
you observe script in header section
$(function()
{
var dates = $("#txtFrom,
#txtTo").datepicker({
minDate: '0',
maxDate: '+7D',
|
minDate: I set it as 0 means it won’t allow us to select
before today date
maxDate: Here I set as '+7D' means it will allow us to select upto maximum
7 days.
If we want to set to 15 days or 1 Month range then we will use
'+15D' or '+1M'
After
completion of aspx page design and your code modifications just run your
application and check your calendar control that would be like below demo
Demo
jQuery Countdown
The Final Countdown is plugin that let's you in control where and how you will display the countdown, this mean that the plugin doesn't make any assumption on how the html will be displayed and it's up to you to do it, with the help of our beloved jQuery selectors.
SHARE THIS LINK:
http://static.hilios.com.br/jquery-countdown/examples/basic.html
DEMO:
Ajax AsyncFileUpload control example in asp.net to upload files to server
First create one new
website after that right click on it add new folder and give name as ‘Files’
after that add AjaxControlToolkit
reference to your application and add following line in your aspx page
<%@ Register Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit"
tagPrefix="ajax"
%>
Once add above
references design your aspx page will be likes this
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajax"
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
// This function will execute after file
uploaded successfully
function uploadComplete() {
document.getElementById('<%=lblMsg.ClientID
%>').innerHTML = "File Uploaded
Successfully";
}
// This function will execute if file upload
fails
function uploadError() {
document.getElementById('<%=lblMsg.ClientID
%>').innerHTML = "File upload
Failed.";
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1"
runat="server"/>
<div>
<ajax:AsyncFileUpload ID="fileUpload1"
OnClientUploadComplete="uploadComplete"
OnClientUploadError="uploadError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad"
runat="server"
ImageUrl="loading.gif"
/>
<br />
<asp:Label ID="lblMsg"
runat="server"
Text=""></asp:Label>
</div>
</form>
</body>
</html>
|
If
you observe above code I define lot of properties to ajax:AsyncFileUpload now
I will explain all the properties of Ajax fileupload control
OnClientUploadComplete – This property is
used to execute the client side JavaScript function after file successfully
uploaded.
OnClientUploadError – This property is
used to execute the client side JavaScript function if file uploading failed.
OnClientUploadStarted – This property is
used to execute the client side JavaScript function whenver file uploading start.
CompleteBackColor – This property is
used to set fileupload control background after file upload complete its
default value ‘Lime’.
ErrorBackColor – This property is
used to set fileupload control background if file upload failed its default value
‘Red’.
UploadingBackColor – This property is the id of the control which is seen
during upload file.
UploaderStyle
–
This property is used to set fileupload control appearance style either Modern or Traditional. By default its
value "Traditional".
ThrobberID – ID of control that
is shown while the file is uploading.
Width
–
This property is used to set width of the control. By default its value ‘355px’
Now
in code behind add following namespaces
C# Code
using System;
using System.Web.UI;
using AjaxControlToolkit;
|
After
completion of adding namespaces write following code in code behind
protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs
e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/")
+ filename);
}
|
VB Code
Imports System.Web.UI
Imports AjaxControlToolkit
Partial Class Default
Inherits System.Web.UI.Page
Protected Sub fileUploadComplete(ByVal sender As Object, ByVal e As AsyncFileUploadEventArgs)
Dim filename As String =
System.IO.Path.GetFileName(fileUpload1.FileName)
fileUpload1.SaveAs(Server.MapPath("Files/")
& filename)
End Sub
End Class
|
Demo
Download
sample code attached
Subscribe to:
Posts (Atom)