/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Week Date Lookup Function???

Copy linkTweet thisAlerts:
Jun 24.2008

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 [B]Week Date [/B]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!

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@LeeUJun 24.2008 — What do you have so far?
Copy linkTweet thisAlerts:
@salnick4authorJun 25.2008 — 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>
[/CODE]
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 [B]Jan 26 2008[/B].

I hope this makes sense.

Thank you for your assistance!
Copy linkTweet thisAlerts:
@shakeukJun 25.2008 — when you say [B]weekdate[/B] 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.
Copy linkTweet thisAlerts:
@salnick4authorJun 25.2008 — 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 [B]2008[/B] and then week num [B]WK04[/B]..the result should be Saturday [B]Jan-26-08[/B]
Copy linkTweet thisAlerts:
@Ay__351_eJun 25.2008 — 

&lt;body&gt;
&lt;script type="text/javascript"&gt;

Date.prototype.week=function(d2){
var i=1, A=[];
while(this&lt;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,[COLOR="Red"]0[/COLOR]);
var d2=new Date(inp1+1,0,[COLOR="Red"]0[/COLOR]);
alert(d+"n"+d2);
var result=d.week(d2);
//alert(result);
//alert(result.length);
alert(result[inp2-1]);
}
&lt;/script&gt;

&lt;select id="year"&gt;
&lt;option value="2008"&gt;2008&lt;/option&gt;
&lt;option value="2007"&gt;2007&lt;/option&gt;
&lt;option value="2006"&gt;2006&lt;/option&gt;
&lt;/select&gt;


&lt;select id="week"&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;/select&gt;


&lt;input type="button" value="click me" onclick="f()"&gt;
Copy linkTweet thisAlerts:
@salnick4authorJun 25.2008 — 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.
Copy linkTweet thisAlerts:
@Ay__351_eJun 25.2008 — <i>
</i>&lt;body&gt;
&lt;script type="text/javascript"&gt;

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&lt;d2) {
var a = new Date(this.setDate(this.getDate()+i) ) ;
var day=a.getDate();
var gd=day&lt;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,[COLOR="SeaGreen"][B][SIZE="3"][SIZE="5"]0[/SIZE][/SIZE][/B][/COLOR]); <br/>
var d2=new Date(inp1+1,0,[COLOR="SeaGreen"][B][SIZE="5"]1[/SIZE][/B][/COLOR]);
alert(d+"n"+d2);
var result=d.week(d2);
//alert(result);
//alert(result.length);
alert(result[inp2-1]);
}
&lt;/script&gt;

&lt;select id="year"&gt;
&lt;option value="2008"&gt;2008&lt;/option&gt;
&lt;option value="2007"&gt;2007&lt;/option&gt;
&lt;option value="2006"&gt;2006&lt;/option&gt;
&lt;/select&gt;


&lt;select id="week"&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;/select&gt;


&lt;input type="button" value="click me" onclick="f()"&gt;
Copy linkTweet thisAlerts:
@shakeukJun 25.2008 — [code=html][/code]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:

[code=html]<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>
[/code]

and this in the body:

[code=html]<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>[/code]

i belive it all works correctly.
Copy linkTweet thisAlerts:
@salnick4authorJun 26.2008 — 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>");
}
}[/CODE]
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 [B]WK01[/B] rather than just 1...is this easy to do?

I look forward to your response....

Thanks
Copy linkTweet thisAlerts:
@shakeukJun 26.2008 — 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>");[/CODE]

to this:

[CODE]document.write("<option value='"+b+"'>WK"+y+"</option>");[/CODE]

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>
[/CODE]

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>
[/CODE]
Copy linkTweet thisAlerts:
@salnick4authorJun 26.2008 — This works GREAT!......thank you all very much....this will give me something to review and learn from.
Copy linkTweet thisAlerts:
@shakeukJun 26.2008 — i always like to see the finished results, do you have a link to your actual site using this? cheers.
×

Success!

Help @salnick4 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...