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
 |
No comments:
Post a Comment