Fortnightly date cycle

Printable View

03-16-2009, 11:24 PM
bthompson

Fortnightly date cycle

Hi,
I have a web form with a date input (actually 3 inputs [dd] / [mm] / [yyyy] - though I'm happy to make it one input box).
The form is used to enter a roster. Rosters begin every wednesday and are a fortnight long.

So I'd like a button of some kind next to the input which says "next". So if the date 18/03/2009 (dd/mm/yyyy) is in the box, and the "next" button is pressed, the date changes to 25/03/2009.

In addition, when you first open the page, the date box is blank, so I'd like to automatically populate that field with the next wednesday which falls into the fortnightly cycle.

I'm thinking something along the lines of: give the JS a start date, then it just counts up in fornightly increments until it gets PAST the current date - then populate the field with that date - then the "next" button would just add 2 weeks to the date already in the input field.

(In there somewhere id also like some validation in case the user enters their own random date)

Unfortunately, my programming is usually in php, and so im a TOTAL noob when it comes to javascript... any help would be great!

**Just so you know, im posting this form to google calendar which automatically syncs with my iphone!! L33t!! Haha...

Thanks in advance!
03-17-2009, 06:37 AM
Kor

Like this?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function setNextWednesday(){ var date=new Date(); var DT=date.getDate(); var DY=date.getDay(); while(DY!=3){ date.setDate(DT++) DY=date.getDay(); } writeDate(date,'inDate'); } function setFortnight(f){ var d=f['inDate'].value.split('/'); var date=new Date(Number(d[2]),Number(d[1])-1,Number(d[0])); var DT=date.getDate(); date.setDate(DT+7); writeDate(date,'outDate'); } function writeDate(date,fname){ var DT=date.getDate(); var YYYY=date.getFullYear(); var MM=date.getMonth()+1; DT<10?DT='0'+DT:null;MM<10?MM='0'+MM:null; var f=document.getElementById('myForm'); f[fname].value=DT+'/'+MM+'/'+YYYY; } onload=setNextWednesday; </script> </head> <body> <form action="" id="myForm"> <input type="text" name="inDate" readonly="readonly"><input type="button" value="Next" onclick="setFortnight(this.form)"><input type="text" name="outDate" readonly="readonly"> </form> </body> </html>

Still, I don't understand what do you mean by fortnight. The way you have put the problem, you need to display the next Wednesday in a field and the next-next Wednesday in the other. This not quite a fortnight (2 weeks)... :)
03-17-2009, 04:36 PM
bthompson

Only one input box!

Thanks Kor, that's close!
I'm after only a single input box which updates itself when you push "next",
And i'd like the date to skip a fortnight, not a week.
Thanks!
03-17-2009, 05:51 PM
bthompson

Need fortnightly start date!

I've had a play with what you wrote and we're getting really close!

I've made the code add 14 days, not seven, and now it updates the original field. So its just about perfect! (see below)

The only thing left to do is determine the start date. Currently, it just finds the next wednesday after today. But I'm on a fortnightly roster, so it needs to find the next wednesday which starts a roster cycle.

For example, if my roster cycle starts today (18 March), then I'd like it display 18/03/09 in the input. If I looked at this page yesterday, it should still display 18/03/09 - as that is the beginning of the next roster cycle. If I look at this page tomorrow, id like it to display 01/04/09 - as that is the beginning of the next fortnight's roster... and so on into the future.

Thanks!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function setNextWednesday(){ var date=new Date(); var DT=date.getDate(); var DY=date.getDay(); while(DY!=3){ date.setDate(DT++) DY=date.getDay(); } writeDate(date,'inDate'); } function showFortnight(f){ var d=f['inDate'].value.split('/'); var date=new Date(Number(d[2]),Number(d[1])-1,Number(d[0])); var DT=date.getDate(); date.setDate(DT+14); //changed from +7 to +14 writeDate(date,'inDate'); //changed from outDate to inDate } function writeDate(date,fname){ var DT=date.getDate(); var YYYY=date.getFullYear(); var MM=date.getMonth()+1; DT<10?DT='0'+DT:null;MM<10?MM='0'+MM:null; var f=document.getElementById('myForm'); f[fname].value=DT+'/'+MM+'/'+YYYY; } onload=setNextWednesday; </script> </head> <body> <form action="" id="myForm"> <input type="text" name="inDate" readonly="readonly"><input type="button" value="Next" onclick="showFortnight(this.form)"> </form> </body> </html>
03-18-2009, 07:28 AM
bthompson

Finished!

Wow, it certainly looks like I'm the only one posting here!

Well, thanks to Kor, I have adapted his script and come up with a working version that meets all my specifications!

Thanks Kor!

Feel free to use this however you want! I've commented everywhere so you can see exactly whats happening and where! Enjoy!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function setNextCycleStartDate(){//Generate first roster start date after today var cycleStartDate=new Date();//Make new date variable cycleStartDate.setFullYear(2009,1,25);//Set that variable with ANY roster cycle start date from the past var today=new Date();//Get todays date while(cycleStartDate<=today){//Whenever the old roster start date is less than today cycleStartDate.setDate(cycleStartDate.getDate()+14);//Add a fortnight to it, until it is a date in the future } writeDate(cycleStartDate,'dateInput');//Send that date to the form date input field } function nextFortnight(f){//Generate the next roster start date after the one already entered var d=f['dateInput'].value.split('/');//Split up the date so it can be manipulated var date=new Date(Number(d[2]),Number(d[1])-1,Number(d[0]));//Do some stuff date.setDate(date.getDate()+14);//Add 14 days (a fortnight) to the date writeDate(date,'dateInput');//Send that date to the writeDate function for sending to the form } function prevFortnight(f){//Generate the previoust roster start date before the one already entered var d=f['dateInput'].value.split('/');//Split up the date so it can be manipulated var date=new Date(Number(d[2]),Number(d[1])-1,Number(d[0]));//Do some stuff date.setDate(date.getDate()-14);//Subtract 14 days (a fortnight) from that date writeDate(date,'dateInput');//Send that date to the writeDate function for sending to the form } function writeDate(date,fname){//Change the date into a readable format, and in dd/mm/yyyy, write that date to the form var DT=date.getDate(); var YYYY=date.getFullYear(); var MM=date.getMonth()+1; DT<10?DT='0'+DT:null;MM<10?MM='0'+MM:null; var f=document.getElementById('gCalForm'); f[fname].value=DT+'/'+MM+'/'+YYYY; } onload=setNextCycleStartDate; </script> </head> <body> <form action="" id="gCalForm"> <input type="text" name="dateInput" readonly="readonly"><input type="button" value="Next" onclick="nextFortnight(this.form)"><input type="button" value="Prev" onclick="prevFortnight(this.form)"><input type="button" value="Reset" onclick="setNextCycleStartDate(this.form)"> </form> </body> </html>