Different interface, not sure if you need everything in different fields, but you can always parse the values server side.
http://www.electricprism.com/aeron/calendar/ On Dec 16, 7:04 am, itaymoav <[email protected]> wrote: > 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'); > } > } > > > > });
