I needed to make a page with a couple of date pickers.
The requirement was that the end date could not be before the start date.
I couldn't find any working example so here is my solution, wich is a working example (see the attachement for the full project)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
MakeStartEndPicker("#txtInp1", "#txtInp2");
MakeStartEndPicker("#txtInp3", "#txtInp4");
});
function MakeStartEndPicker(startElement, endElement)
{
$(startElement).datepicker({
minDate: 0,
dateFormat: 'd M yy',
buttonText: 'Klik om een datum te kiezen',
showOn: 'both', buttonImage: 'icon_calender.gif',
buttonImageOnly: true, showAnim: 'slideDown',
duration: 0 ,
beforeShow: function(input)
{
var date2 = $(endElement).datepicker('getDate');
if(date2 != undefined) return { maxDate: date2 };
}
});
$(endElement).datepicker({
minDate: 0,
dateFormat: 'd M yy',
showOn: 'both', buttonImage: 'icon_calender.gif',
buttonImageOnly: true, showAnim: 'slideDown',
duration: 0 ,
beforeShow: function(input)
{
var date1 = $(startElement).datepicker('getDate');
if(date1 != undefined) return { minDate: date1 };
}
});
}
</script>
</head>
<body>
<input id="txtInp1" type="text" class="dateTextBox" /><br />
<input id="txtInp2" type="text" class="dateTextBox" /><br />
<input id="txtInp3" type="text" class="dateTextBox" /><br />
<input id="txtInp4" type="text" class="dateTextBox" /><br />
</body>
</html>
Posted via email from wiibart’s posterous
Recent Comments