Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

End Date should be greater than Start Date using jQuery Date Picker

Apr 28, 2012
Introduction: 
Here I will explain how to set jQuery validation like end date should be greater than start date and allow user to select dates only within particular dates range using jquery datepicker control in asp.net.
Description:
  
In previous post I explained many articles relating to
JQuery Datepicker in asp.net. Now I will explain how to set end date is greater than start date in jquery datepicker control using asp.net.

Sometimes we will get situation like allow user to enter start date, end date and end date should be greater than start date and another thing if we want to allow user to select only within 1 week or 10 days or 15 days or 1 month range we can set these things easily with set month/year range in JQuery datepickerIf we want to implement this one using Ajax calendar control we need to write much code in that case if we use JQuery datepicker control we can make it easily by setting some properties.

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

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

9 comments :

Anonymous said...

great site....

Sushant said...

hi
i need to open the calender on a image click as well as textbox click.
What i need to do in the existing code ?

coolduderaj said...

How can I change date format???

Suresh Dasari said...

@coolduderaj..
to change date format check this post
http://www.aspdotnet-suresh.com/2012/05/changeset-date-format-in-jquery.html

Suresh Dasari said...

@Sushanth...
to show calendar control when click on image check this post
http://www.aspdotnet-suresh.com/2012/04/show-jquery-datepicker-when-click-on.html

priyamvadha said...

I want the same functionality, but only month and year...

rifayee said...



actually i received an error custom.css,min.js,custom.min.js was not found..can u tell me pls..i am new to dot net...

SURYA said...

@Rifayee
first off all include a jquery library in our project.

mahathma tm said...

hi need only pick particular week or month. help me

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.