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.
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 datepicker. If 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
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 Email
|
|||
12 comments :
great site....
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 ?
How can I change date format???
@coolduderaj..
to change date format check this post
http://www.aspdotnet-suresh.com/2012/05/changeset-date-format-in-jquery.html
@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
I want the same functionality, but only month and year...
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...
@Rifayee
first off all include a jquery library in our project.
hi need only pick particular week or month. help me
Hi,
i try this it' working fine but i need time so how can i add time in this script?
i need this functionality for gridview row in asp .
how it will be implemented?
I want to move the files from source date to target date ,pls mention the condition by using datepicker
Note: Only a member of this blog may post a comment.