using jQuery UI Datepickers.
Notice when you select a start date it becomes the min end date
and when you select an end date it becomes the max start date.
<!doctype html>
<html lang="en"><head><title>jQuery UI Datepicker - Restrict date range</title><link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /><script type="text/javascript" src="../../jquery-1.3.2.js"></script><script type="text/javascript" src="../../ui/ui.core.js"></script><script type="text/javascript" src="../../ui/ui.datepicker.js"></script><script type="text/javascript" src="http://www.mattkruse.com/javascript/date/compact/date.js"></script><link type="text/css" href="../demos.css" rel="stylesheet" /><script type="text/javascript">$(function() {$(".startDatepicker").datepicker({showOn: 'button',buttonImage: 'images/calendar.gif',buttonImageOnly: true,dateFormat: "mm/dd/y" ,onSelect: function(dateText) {//alert(dateText);var d = parseDate(dateText);alert(d);$(".endDatepicker").datepicker('option', 'minDate', d);}});$(".endDatepicker").datepicker({showOn: 'button',buttonImage: 'images/calendar.gif',buttonImageOnly: true,dateFormat: "mm/dd/y" ,onSelect: function(dateText) {//alert(dateText);var d = parseDate(dateText);alert(d);$(".startDatepicker").datepicker('option', 'maxDate', d);}});});</script></head><body><div class="demo"><p>Start Date: <input type="text" id="startDatepicker" class="startDatepicker" ></p><p>End Date: <input type="text" id="endDatepicker" class="endDatepicker"></p></div><!-- End demo --></body></html>
Friday, April 24, 2009
My jQuery Date Range
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment