www.webdeveloper.com
Results 1 to 13 of 13

Thread: [RESOLVED] Week Date Lookup Function???

Hybrid View

  1. #1
    Join Date
    Jun 2008
    Posts
    15

    resolved [RESOLVED] Week Date Lookup Function???

    I am fairly new to javascript...so please bear with me...

    I need to build a basic pop-up that will allow users to do the following:

    1) Enter Year.....this can be hardcoded (no problem)
    2) Enter Week Number.... this may also be hardcoded (e.g. WK01, WK02)
    3) Once the above fields are complete, then when the user submits...the textbox should provide the correct Week Date that corresponds to the Year and Week Number.

    I would love if someone could point me in the right direction as to how I can accomplish my 3rd step.

    Thank you!

  2. #2
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    What do you have so far?

  3. #3
    Join Date
    Jun 2008
    Posts
    15
    I have a form...with the "Year" dropdown box...and the "Week Num" dropdown box...

    Code:
    <form action=""><div>
    <select name="Year">
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    </select>
    <select name="Week Num">
    <option value="WK01">WK01</option>
    <option value="WK02">WK02</option>
    <option value="WK03">WK03</option>
    <option value="WK04">WK04</option>
    <option value="WK05">WK05</option>
    </select>
    <input type="text" name="Week Name"></div>
    <div><input type="submit" value="submit"></div>
    </form>
    I am not sure if the "Week Num" needs to be generated by a function like getWeek()....but ultimately I am trying to create a simple lookup form where a user can enter a year, and out of the possible 52 weeks,..they can view the appropriate week date associated with the selected week number.

    For example...if the user selected 2008..then WK04..the result for week date should be Jan 26 2008.

    I hope this makes sense.

    Thank you for your assistance!

  4. #4
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    when you say weekdate do u mean the week commencing?

    this shouldnt be that difficult, ill have a look when i get home tonight see if i can help out with this.

  5. #5
    Join Date
    Jun 2008
    Posts
    15
    The week date will actually be the Saturday date for each week.

    So as I mentioned in my previous reply...if a user selects the year 2008 and then week num WK04..the result should be Saturday Jan-26-08

  6. #6
    Join Date
    Sep 2007
    Posts
    317
    Code:
      
      
    <body>
    <script type="text/javascript">
    
    Date.prototype.week=function(d2){
    var  i=1, A=[];
    while(this<d2) { 
    var a = new Date(this.setDate(this.getDate()+i) ) ; 
    if(a.getDay()==6) A[A.length]=a ;
    }
    return A;
    }
    
    function f(){
    var inp1 =document.getElementById('year');
    inp1=Number(inp1.options[inp1.selectedIndex].value);
    
    var inp2 =document.getElementById('week');
    inp2=Number(inp2.options[inp2.selectedIndex].value);
    //alert(inp1+"\n"+inp2)
    
    var d=new Date(inp1,0,0);
    var d2=new Date(inp1+1,0,0);
    alert(d+"\n"+d2);
    var result=d.week(d2);
    //alert(result);
    //alert(result.length);
    alert(result[inp2-1]); 
    }
    </script>
    
    <select id="year">
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    </select>
    
    
    <select id="week">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    
    
    <input type="button" value="click me" onclick="f()">
    Last edited by Ayşe; 06-25-2008 at 12:59 PM.

  7. #7
    Join Date
    Jun 2008
    Posts
    15
    This is great!....I believe that my last question would be how to format the alert date to something like DD-MMM-YY (e.g. 05-Jan-06)...

    This is important for the users we deal with...

    Thank you.

  8. #8
    Join Date
    Sep 2007
    Posts
    317
    Code:
    <body>
    <script type="text/javascript">
    
    Date.prototype.week=function(d2){
    var m=["January","February","March","April","May","June","July","August","September","October","November","December"];
    var  i=1, A=[];
    while(this<d2) { 
    var a = new Date(this.setDate(this.getDate()+i) ) ; 
    var day=a.getDate();
    var gd=day<10?"0"+day:day;
    var str = gd +"-" +m[a.getMonth()].substr(0,3)+ "-"+String(a.getFullYear()).substr(2);
    if(a.getDay()==6) A[A.length]=str ;
    }
    return A;
    }
    
    function f(){
    var inp1 =document.getElementById('year');
    inp1=Number(inp1.options[inp1.selectedIndex].value);
    
    var inp2 =document.getElementById('week');
    inp2=Number(inp2.options[inp2.selectedIndex].value);
    //alert(inp1+"\n"+inp2)
    
    var d=new Date(inp1,0,0);  
    var d2=new Date(inp1+1,0,1);
    alert(d+"\n"+d2);
    var result=d.week(d2);
    //alert(result);
    //alert(result.length);
    alert(result[inp2-1]); 
    }
    </script>
    
    <select id="year">
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    </select>
    
    
    <select id="week">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    
    
    <input type="button" value="click me" onclick="f()">
    Last edited by Ayşe; 06-25-2008 at 01:33 PM.

  9. #9
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    lol seeems like im too late... was playing football then at a friends but as promised when i got back i came up with the script and it works fine and you would never need to hadcode the year because this grabs the last 2 years and next 5 years to choose from...

    anyway if you wanna test it, this goes in the head section:

    HTML Code:
    <script language="javascript">
    
    function yearDropDown(){
    	var theDate=new Date();
    	var	theYear=theDate.getFullYear()-2;
    	for(y=0;y<6;y++){
    		document.write("<option value='"+theYear+"'>"+theYear+"</option>");
    		theYear++;
    	}
    }
    function yearDropWeek(selectedYear){
    	for(y=1,b=1;y<=52;y++,b++){
    		if(y<10){
    		y="0"+y;
    		}
    		document.write("<option value='"+b+"'>"+y+"</option>");
    	}
    }
    function andTheDateIs(wkNum,yrNum){
    	var theDate=Date.UTC(yrNum,0,1);
    	var diff=wkNum*604800000;
    	var result=theDate+diff;
    	var resultDate=new Date(result);
    	
    	var dateNum = resultDate.getDate();
    	var dateDay = resultDate.getDay();
    	var dateMonth = resultDate.getMonth();
    	
    	if(dateDay!==6){
    		var minusMilli = (dateDay+1)*86400000;
    		result=result-minusMilli;
    		var notSatDate=new Date(result);
    		dateNum = notSatDate.getDate();
    		dateDay = notSatDate.getDay();
    		dateMonth = notSatDate.getMonth();
    	}
    	
    
    	
    	var month=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    		
    
    	document.getElementById("resultBox").innerHTML="Sat: "+dateNum+"-"+month[dateMonth].substr(0,3)+"-"+yrNum;
    }
    </script>
    <style type="text/css">
    input, select{
    	width:80px;
    }
    </style>
    and this in the body:

    HTML Code:
    <select id="yearList">
    <script language="javascript">yearDropDown();</script>
    </select>
    <select id="weekList">
    <script language="javascript">yearDropWeek(document.getElementById("yearList").value);</script>
    </select>
    <input type="button" onClick="andTheDateIs(document.getElementById('weekList').value,document.getElementById('yearList').value)" value="get result!" />
    <h3 id="resultBox"></h3>
    i belive it all works correctly.
    Last edited by shakeuk; 06-25-2008 at 07:47 PM.

  10. #10
    Join Date
    Jun 2008
    Posts
    15
    This is excellent!

    I am in the process of applying it to my pop-up....one question though...I was reviewing the following function:
    Code:
    function yearDropWeek(selectedYear){
    	for(y=1,b=1;y<=52;y++,b++){
    		if(y<10){
    		y="0"+y;
    		}
    		document.write("<option value='"+b+"'>"+y+"</option>");
    	}
    }
    Is it possible that a year may have more than 52 weeks?

    ...and my final question is if I needed to modify the this function for the Week Number dropdown box so that it looks like WK01 rather than just 1...is this easy to do?

    I look forward to your response....

    Thanks

  11. #11
    Join Date
    Jun 2008
    Location
    England
    Posts
    121
    i originally coded it to look like that but it looked heavy on the eye, as far as i am aware there is only 52 weeks a year even in a leep year googled it.

    to make it look like you want change this:

    Code:
    document.write("<option value='"+b+"'>"+y+"</option>");
    to this:

    Code:
    document.write("<option value='"+b+"'>WK"+y+"</option>");
    notice all i did was add the two letters in there ^^ really simple.

    also i have cleaned up all my code so in the header:

    Code:
    <script language="javascript">
    
    function yearDropDown(){
    	var theDate=new Date();
    	var theYear=theDate.getFullYear()-2;
    	for(y=0;y<6;y++){
    		document.write("<option value='"+theYear+"'>"+theYear+"</option>");
    		theYear++;
    	}
    }
    function yearDropWeek(){
    	for(y=1;y<=52;y++){
    		var b=y;
    		if(y<10){
    		y="0"+y;
    		}
    		document.write("<option value='"+b+"'>WK"+y+"</option>");
    	}
    }
    function andTheDateIs(wkNum,yrNum){
    	var theDate=Date.UTC(yrNum,0,1);
    	var result=theDate+(wkNum*604800000);
    	var resultDate=new Date(result);
    	
    	var dateNum = resultDate.getDate();
    	var dateDay = resultDate.getDay();
    	var dateMonth = resultDate.getMonth();
    	
    	if(dateDay!==6){
    		result=result-((dateDay+1)*86400000);
    		resultDate=new Date(result);
    		dateNum = resultDate.getDate();
    		dateDay = resultDate.getDay();
    		dateMonth = resultDate.getMonth();
    	}
    
    	var month=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    		
    	document.getElementById("resultBox").innerHTML="Sat: "+dateNum+"-"+month[dateMonth].substr(0,3)+"-"+yrNum;
    }
    </script>
    
    <style type="text/css">
    
    input, select{width:80px}
    
    </style>
    and in the body:

    Code:
    <select id="yearList">
    <script language="javascript">yearDropDown();</script>
    </select>
    <select id="weekList">
    <script language="javascript">yearDropWeek();</script>
    </select>
    <input type="button" onClick="andTheDateIs(document.getElementById('weekList').value,document.getElementById('yearList').value)" value="get result!" />
    <h3 id="resultBox"></h3>
    Last edited by shakeuk; 06-26-2008 at 09:12 AM.

  12. #12
    Join Date
    Jun 2008
    Posts
    15
    This works GREAT!......thank you all very much....this will give me something to review and learn from.

Thread Information

Users Browsing this Thread

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

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