Well,
I have scrunch some thing, this assumes you have either one OR two
dates (should be fairly easy to make it handle more). Each date is
represented by 3 drop downs month,day, year.
HTML:
FROM
<select name="month" id="month">...</select>
<select name="day" id="day">...</select>
<select name="year" id="year">...</select>
TO
<select name="month1" id="month1">...</select>
<select name="day1" id="day1">...</select>
<select name="year1" id="year1">...</select>
CODE YOU NEED TO ADD:
<script type='text/javascript'>
var MyDatesValidator=new DateValidator
('month','day','year','month1','day1','year1');
</script>
The class:
var DateValidator=new Class({
isTimeFrame: true,
month: null,
day: null,
year: null,
month1: null,
day1 :null,
year1: null,
initialize: function(month,day,year,month1,day1,year1) {
this.month=$(month);
this.day=$(day);
this.year=$(year);
if(!month1) {
this.isTimeFrame=false;
}else{
this.month1=$(month1);
this.day1=$(day1);
this.year1=$(year1);
}
this.attachEvents();
//fire event to see the correct number of days is shown. WILL GO
AWAY ONCE I BOUNDLE IT ALL UNDER ONE PACKAGE!!!
this.month.fireEvent('change');
this.month1.fireEvent('change');
},//EOF constructor.
//modify the relevant days drop down to show the correct number of
days.
modifyActual: function(number_of_days,Elm){
var old_selected_idx=Elm.selectedIndex;
Elm.innerHTML='';
for(var i=0;i<number_of_days;i++)
{
var Option=new Element('option',{value:(i+1)});
Option.appendText(i+1);
Elm.adopt(Option);
}
if(old_selected_idx<number_of_days)
{
Elm.selectedIndex=old_selected_idx;
}else{
Elm.selectedIndex=number_of_days-1;
}
},
modify: function(){
var MyDate=new Date(this.year.options
[this.year.selectedIndex].value*1,this.month.selectedIndex+1,0);
this.modifyActual(MyDate.getDate(),this.day);
},
modify1: function(){
var MyDate=new Date(this.year1.options
[this.year1.selectedIndex].value*1,this.month1.selectedIndex+1,0);
this.modifyActual(MyDate.getDate(),this.day1);
},
attachEvents: function(){
//modify days numbers
this.month.addEvent('change',this.modify.bind(this));
this.year.addEvent('change',this.modify.bind(this));
if(this.isTimeFrame){
this.month1.addEvent('change',this.modify1.bind(this));
this.year1.addEvent('change',this.modify1.bind(this));
//attach the validate date range event (from is lower
then to)
var Form=this.day.getParent('form');
Form.addEvent('submit',this.validate.bind(this));
}
},
validate: function(e){
//get time stamps from both dates
var time_stamp1=new Date(this.year.options
[this.year.selectedIndex].value*1,this.month.selectedIndex
+1,this.day.selectedIndex+1).getTime();
var time_stamp2=new Date(this.year1.options
[this.year1.selectedIndex].value*1,this.month1.selectedIndex
+1,this.day1.selectedIndex+1).getTime();
if(time_stamp2<time_stamp1)
{
e.stop();
alert('From has to be before To');
}
}
});
