www.webdeveloper.com
Results 1 to 5 of 5

Thread: Fortnightly date cycle

  1. #1
    Join Date
    Mar 2009
    Posts
    8

    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!

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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)...
    Last edited by Kor; 03-17-2009 at 06:40 AM.

  3. #3
    Join Date
    Mar 2009
    Posts
    8

    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!

  4. #4
    Join Date
    Mar 2009
    Posts
    8

    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>

  5. #5
    Join Date
    Mar 2009
    Posts
    8

    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>
    Last edited by bthompson; 03-18-2009 at 07:33 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles